Formen

Iwwersiicht

Bootstrap Form Kontrollen erweideren eis Rebooted Form Stiler mat Klassen. Benotzt dës Klassen fir op hir personaliséiert Affichage ze wielen fir eng méi konsequent Rendering iwwer Browser an Apparater.

Gitt sécher e passenden typeAttribut op all Input ze benotzen (zB emailfir E-Mailadress oder numberfir numeresch Informatioun) fir vun neien Input Kontrollen wéi E-Mail Verifizéierung, Zuelauswiel a méi ze profitéieren.

Hei ass e séier Beispill fir Bootstrap Formstiler ze demonstréieren. Liest weider fir Dokumentatioun iwwer erfuerderlech Klassen, Formlayout a méi.

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

Form Text

Block-Niveau oder Inline-Niveau Form Text kann erstallt ginn mat .form-text.

Form Text ënnert Inputen kann mat stylesch ginn .form-text. Wann e Block-Niveau Element benotzt gëtt, gëtt en Topmarge bäigefüügt fir einfach Ofstand vun den Inputen hei uewen.

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

Inline Text kann all typesch Inline HTML Element benotzen (sief et e <span>, <small>, oder soss eppes) mat näischt méi wéi d' .form-textKlass.

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

Behënnert Formen

Füügt de disabledbooleschen Attribut op en Input fir Benotzerinteraktiounen ze vermeiden an et méi hell ze maachen.

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

Füügt den disabledAttribut zu engem <fieldset>fir all d'Kontrollen bannen auszeschalten. Browser behandelen all gebierteg Form Kontrollen ( <input>, <select>, an <button>Elementer) bannent engem <fieldset disabled>als behënnert, verhënnert souwuel Tastatur wéi och Maus Interaktiounen op hinnen.

Wéi och ëmmer, wann Är Form och personaliséiert Knäppchenähnlech Elementer enthält wéi <a class="btn btn-*">...</a>, ginn dës nëmmen e Stil vun pointer-events: none, dat heescht datt se ëmmer nach fokusséierbar an operabel sinn mat der Tastatur. An dësem Fall musst Dir dës Kontrollen manuell änneren andeems Dir bäigefüügt tabindex="-1"fir ze verhënneren datt se de Fokus kréien an aria-disabled="disabled"hiren Zoustand un Hëllefstechnologien signaliséieren.

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

Accessibilitéit

Vergewëssert Iech datt all Form Kontrollen e passenden zougänglechen Numm hunn, sou datt hiren Zweck un d'Benotzer vun Hëllefstechnologien vermëttelt ka ginn. Deen einfachste Wee fir dëst z'erreechen ass en <label>Element ze benotzen, oder - am Fall vu Knäppercher - genuch beschreiwen Text als Deel vum <button>...</button>Inhalt ze enthalen.

Fir Situatiounen, wou et net méiglech ass e siichtbaren <label>oder passenden Textinhalt ze enthalen, ginn et alternativ Weeër fir ëmmer nach en zougänglechen Numm ze liwweren, wéi:

• <label>Elementer verstoppt mat der .visually-hiddenKlass
• Weist op en existent Element deen als Label benotze kannaria-labelledby
• En titleAttribut ubidden
• Explizit den zougänglechen Numm op en Element setzen mataria-label

Wann keng vun dësen präsent sinn, kënnen Hëllefstechnologien op d'Benotzung vum placeholderAttribut als Réckfall fir den zougänglechen Numm op <input>an <textarea>Elementer benotzen. D'Beispiller an dëser Rubrik bidden e puer proposéiert, case-spezifesch Approche.

Wärend visuell verstoppt Inhalter benotzt ( .visually-hidden, aria-label, a souguer placeholderInhalter, dee verschwënnt eemol e Formfeld Inhalt huet) wäert Hëllefstechnologie Benotzer profitéieren, e Mangel u sichtbare Labeltext kann nach ëmmer problematesch sinn fir verschidde Benotzer. Eng Form vu sichtbare Label ass allgemeng déi bescht Approche, souwuel fir Accessibilitéit an Usability.

Sass

Vill Formvariablen ginn op allgemengen Niveau gesat fir nei benotzt an duerch eenzel Formkomponenten ausgebaut ze ginn. Dir gesitt dës am meeschten als $btn-input-*a $input-*Variabelen.

Variablen

$btn-input-*Variablen sinn gedeelt global Variablen tëscht eise Knäppercher an eise Formkomponenten. Dir fannt dës dacks als Wäerter op aner komponentspezifesch Variablen ëmgezeechent.

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