Formulieren

Oersicht

De foarmkontrôles fan Bootstrap wreidzje út op ús Rebooted foarmstilen mei klassen. Brûk dizze klassen om te kiezen foar har oanpaste byldskermen foar in mear konsekwinte werjefte oer browsers en apparaten.

Wês wis dat jo in passend typeattribút brûke op alle ynputs (bygelyks emailfoar e-mailadres of numberfoar numerike ynformaasje) om foardiel te meitsjen fan nijere ynfierkontrôles lykas e-postferifikaasje, nûmerseleksje, en mear.

Hjir is in fluch foarbyld om de foarmstilen fan Bootstrap te demonstrearjen. Bliuw lêze foar dokumintaasje oer fereaske klassen, foarmyndieling, en mear.

<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>

Formulier tekst

Tekst op bloknivo of ynline-nivo kin makke wurde mei .form-text.

Formuliertekst hjirûnder yngongen kinne wurde stylearre mei .form-text. As in elemint op bloknivo brûkt wurdt, wurdt in topmarzje tafoege foar maklike ôfstân fan 'e yngongen hjirboppe.

<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>

Ynline tekst kin elk typysk ynline HTML-elemint brûke (it is in <span>, <small>, of wat oars) mei neat mear as de .form-textklasse.

<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>

Utskeakele formulieren

Foegje it disabledBooleaanske attribút ta oan in ynfier om ynteraksjes mei brûkers te foarkommen en it ljochter te meitsjen.

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

Foegje it disabledattribút oan in <fieldset>om alle kontrôles binnen út te skeakeljen. Blêders behannelje alle native foarmkontrôles ( <input>, <select>, en <button>eleminten) binnen in <fieldset disabled>as útskeakele, en foarkomme sawol toetseboerd as mûs ynteraksjes op har.

As jo ​​formulier lykwols ek oanpaste knop-like eleminten omfettet, lykas <a class="btn btn-*">...</a>, sille dizze allinich in styl krije fan pointer-events: none, wat betsjut dat se noch fokusber binne en te betsjinjen binne mei it toetseboerd. Yn dit gefal moatte jo dizze kontrôles manuell wizigje troch ta te foegjen tabindex="-1"om foar te kommen dat se fokus krije en aria-disabled="disabled"har steat oan assistive technologyen sinjalearje.

<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>

Tagonklikheid

Soargje derfoar dat alle formulierkontrôles in passende tagonklike namme hawwe, sadat har doel kin wurde oerdroegen oan brûkers fan assistinte technologyen. De ienfâldichste manier om dit te berikken is in <label>elemint te brûken, of - yn it gefal fan knoppen - genôch beskriuwende tekst op te nimmen as ûnderdiel fan 'e <button>...</button>ynhâld.

Foar situaasjes dêr't it net mooglik is om in sichtbere <label>of passende tekstynhâld op te nimmen, binne d'r alternative manieren om noch in tagonklike namme te jaan, lykas:

• <label>eleminten ferburgen mei help fan de .visually-hiddenklasse
• Ferwizend nei in besteand elemint dat kin fungearje as in label mei helparia-labelledby
• It jaan fan in titleattribút
• De tagonklike namme eksplisyt ynstelle op in elemint meiaria-label

As net ien fan dizze is oanwêzich, kinne assistinte technologyen taflecht ta it brûken fan it placeholderattribút as in fallback foar de tagonklike namme op <input>en <textarea>eleminten. De foarbylden yn dizze seksje jouwe in pear foarstelde, saakspesifike oanpak.

Wylst it brûken fan fisueel ferburgen ynhâld ( .visually-hidden, aria-label, en sels placeholderynhâld, dy't ferdwynt ienris in formulierfjild ynhâld hat) sil helpe technology brûkers profitearje, in gebrek oan sichtbere labeltekst kin noch problematysk wêze foar bepaalde brûkers. Guon foarm fan sichtber label is oer it algemien de bêste oanpak, sawol foar tagonklikens as brûkberens.

Sass

In protte formulierfariabelen wurde op in algemien nivo ynsteld om opnij te brûken en útwreide troch yndividuele formulierkomponinten. Jo sille dizze meastentiids sjen as $input-btn-*en $input-*fariabelen.

Fariabelen

$input-btn-*fariabelen binne dield globale fariabelen tusken ús knoppen en ús formulier komponinten. Jo sille dizze faaks opnij tawize as wearden nei oare komponint-spesifike fariabelen.

$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;