Fɔm dɛn

Ɔvaviu fɔ di Baybul

Bootstrap in fɔm kɔntrol dɛn de ɛkspɛn pan wi Ribɔt fɔm stayl dɛn wit klas dɛn. Yuz dɛn klas ya fɔ opt insay dɛn kɔstɔmayt displei fɔ wan mɔ kɔnsistɛns rɛnda akɔdin to brɔwza ɛn divays dɛn.

Mek shɔ se yu yuz wan typeatribyut we fit pan ɔl di input dɛn (ɛgz., emailfɔ imel adrɛs ɔ numberfɔ nɔmba infɔmeshɔn) fɔ tek advantej pan nyu input kɔntrol dɛn lɛk imel verifyeshɔn, nɔmba sɛlɛkshɔn, ɛn ɔda tin dɛn.

Na wan kwik ɛgzampul fɔ sho Bootstrap in fɔm stayl dɛn. Kɔntinyu fɔ rid fɔ gɛt dɔkyumɛnt dɛn bɔt di klas dɛn we dɛn nid, fɔm layout, ɛn ɔda tin dɛn.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fɔm tɛks

Yu kin mek blɔk-lɛvel ɔ inlayn-lɛvel fɔm tɛks we yu de yuz .form-text.

Fɔm tɛks dɔŋ input dɛn kin stayl wit .form-text. If dɛn go yuz wan blɔk-lɛvel ɛlimɛnt, dɛn ad wan ɔp margin fɔ mek i izi fɔ spes frɔm di input dɛn we de ɔp.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Inlayn tɛks kin yuz ɛni tipik inlayn HTML ɛlimɛnt (ilɛksɛf na <span>, <small>, ɔ ɔda tin) we nɔ gɛt natin pas di .form-textklas.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Fɔm dɛn we gɛt disabled

Ad di disabledboolean atribyut pan wan input fɔ mek yuz nɔ intarakshɔn ɛn mek i tan lɛk layt.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Ad di disabledatribyut to a <fieldset>fɔ disable ɔl di kɔntrol dɛn we de insay. Brawza dɛn de trit ɔl di nativ fɔm kɔntrol dɛn ( <input>, <select>, ɛn <button>ɛlimɛnt dɛn) insay a <fieldset disabled>as disabled, we de mek ɔl tu di kibɔd ɛn maws nɔ de intarakshɔn pan dɛn.

Bɔt if yu fɔm gɛt tin dɛn bak we tan lɛk kɔstɔm bɔtin lɛk <a class="btn btn-*">...</a>, dɛn go jɔs gi dɛn wan stayl we na pointer-events: none, we min se dɛn stil ebul fɔ pe atɛnshɔn ɛn dɛn kin wok wit di kibɔd. If na so i bi, yu fɔ chenj dɛn kɔntrol dɛn ya wit yu an bay we yu ad tabindex="-1"fɔ mek dɛn nɔ gɛt fɔs ɛn aria-disabled="disabled"fɔ sho se dɛn stet to ɛp tɛknɔlɔji dɛn.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Di we aw pɔsin kin ebul fɔ go de

Mek shɔ se ɔl di fɔm kɔntrol dɛn gɛt di rayt nem we pɔsin kin ebul fɔ yuz so dat dɛn go ebul fɔ tɛl di wan dɛn we de yuz ɛp tɛknɔlɔji dɛn wetin dɛn want fɔ du. Di simpul we fɔ du dis na fɔ yuz wan <label>ɛlimɛnt, ɔ—if bɔt bɔtin dɛn—fɔ put tɛks we de tɔk bɔt di tin dɛn we de insay di buk fayn fayn wan as pat pan di <button>...</button>tin dɛn we de insay.

Fɔ situeshɔn dɛn usay i nɔ pɔsibul fɔ put <label>tɛks kɔntinyu we pɔsin kin si ɔ we fit, ɔda we dɛn de fɔ stil gi nem we pɔsin kin ebul fɔ yuz, lɛk:

• <label>ɛlimɛnt dɛn we dɛn ayd we dɛn de yuz di .visually-hiddenklas
• Point to wan elemɛnt we dɔn de we kin akt lɛk lɛbl yuzaria-labelledby
• Fɔ gi wan titleatribyut
• Setin klia wan di aksesbul nem pan wan ɛlimɛnt we de yuzaria-label

If nɔbɔdi pan dɛn wan ya nɔ de, ɛp tɛnkɔlɔji dɛn kin yuz di placeholderatribyut as fɔl bak fɔ di aksesbul nem pan <input>ɛn <textarea>ɛlimɛnt dɛn. Di ɛgzampul dɛn na dis pat de gi sɔm tin dɛn we dɛn dɔn tɔk bɔt, we gɛt fɔ du wit kes.

Pan ɔl we fɔ yuz tin dɛn we dɛn ayd we pɔsin kin si ( .visually-hidden, aria-label, ɛn ivin placeholdertin dɛn we kin dɔn, we kin dɔn wans wan fɔm fil gɛt tin dɛn) go bɛnifit di wan dɛn we de yuz di tɛknɔlɔji we de ɛp, if dɛn nɔ gɛt di lɛbl tɛks we pɔsin kin si kin stil bi prɔblɛm fɔ sɔm pipul dɛn we de yuz am. Sɔm kayn lɛbl we pɔsin kin si na jɔs di bɛst we fɔ yuz am, fɔ mek i izi fɔ yuz ɛn fɔ yuz am.

Sass we bin de

Bɔku fɔm vɛriɔbul dɛn de sɛt na wan jenɛral lɛvɛl fɔ yuz bak ɛn ɛkstɛnd bay wan wan fɔm kɔmpɔnɛnt dɛn. Yu go si dɛn wan ya mɔs tɛm as $btn-input-*ɛn $input-*vɛriɔbul dɛn.

Di tin dɛn we kin chenj

$btn-input-*variebul na shered global variebul bitwin wi bɔtin ɛn wi fɔm kɔmpɔnɛnt dɛn. Yu go si se dɛn kin riasayn dɛn wan ya bɔku tɛm as valyu to ɔda kɔmpɔnɛnt-spɛsifi k vɛriɔbul dɛn.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;