Formulieren

Overzicht

De formulierbesturingselementen van Bootstrap breiden onze opnieuw opgestarte formulierstijlen uit met klassen. Gebruik deze klassen om u aan te melden voor hun aangepaste weergaven voor een consistentere weergave op alle browsers en apparaten.

Zorg ervoor dat u een geschikt typekenmerk gebruikt voor alle invoer (bijvoorbeeld emailvoor e-mailadres of numbervoor numerieke informatie) om te profiteren van nieuwere invoeropties zoals e-mailverificatie, nummerselectie en meer.

Hier is een snel voorbeeld om de formulierstijlen van Bootstrap te demonstreren. Blijf lezen voor documentatie over vereiste klassen, formulierlay-out en meer.

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

Formuliertekst

Formuliertekst op blokniveau of inline-niveau kan worden gemaakt met .form-text.

Formuliertekst onder invoer kan worden opgemaakt met .form-text. Als een element op blokniveau wordt gebruikt, wordt een bovenmarge toegevoegd voor gemakkelijke afstand van de bovenstaande invoer.

<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-tekst kan elk typisch inline HTML-element gebruiken (of het nu een <span>, <small>, of iets anders is) met niets meer dan 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>

Uitgeschakelde formulieren

Voeg het disabledbooleaanse attribuut toe aan een invoer om gebruikersinteracties te voorkomen en deze lichter te laten lijken.

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

Voeg het disabledkenmerk toe aan a <fieldset>om alle besturingselementen binnen uit te schakelen. Browsers behandelen alle native formulierbesturingselementen ( <input>, <select>, en <button>elementen) binnen a <fieldset disabled>als uitgeschakeld, waardoor zowel toetsenbord- als muisinteracties erop worden voorkomen.

Als uw formulier echter ook aangepaste knopachtige elementen bevat, zoals <a class="btn btn-*">...</a>, krijgen deze alleen de stijl van pointer-events: none, wat betekent dat ze nog steeds kunnen worden gefocust en bediend met het toetsenbord. In dit geval moet u deze bedieningselementen handmatig wijzigen door ze toe te voegen tabindex="-1"om te voorkomen dat ze de focus krijgen en aria-disabled="disabled"om hun status door te geven aan ondersteunende technologieë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>

Toegankelijkheid

Zorg ervoor dat alle formulierbesturingselementen een geschikte, toegankelijke naam hebben, zodat het doel ervan kan worden overgebracht aan gebruikers van ondersteunende technologieën. De eenvoudigste manier om dit te bereiken is door een <label>element te gebruiken, of - in het geval van knoppen - voldoende beschrijvende tekst als onderdeel van de <button>...</button>inhoud op te nemen.

Voor situaties waarin het niet mogelijk is om een ​​zichtbare <label>of passende tekstinhoud op te nemen, zijn er alternatieve manieren om toch een toegankelijke naam te geven, zoals:

• <label>elementen verborgen met behulp van de .visually-hiddenklasse
• Wijzen naar een bestaand element dat als label kan fungeren met behulp vanaria-labelledby
• Een titleattribuut verstrekken
• Expliciet de toegankelijke naam op een element instellen metaria-label

Als geen van deze aanwezig is, kunnen ondersteunende technologieën hun toevlucht nemen tot het gebruik van het placeholderattribuut als een uitwijkmogelijkheid voor de toegankelijke naam op <input>en <textarea>elementen. De voorbeelden in deze sectie bieden een aantal voorgestelde, casusspecifieke benaderingen.

Hoewel het gebruik van visueel verborgen inhoud ( .visually-hidden, aria-label, en zelfs placeholderinhoud, die verdwijnt zodra een formulierveld inhoud heeft) gebruikers van ondersteunende technologie ten goede zal komen, kan het ontbreken van zichtbare labeltekst voor bepaalde gebruikers nog steeds problematisch zijn. Een vorm van zichtbaar label is over het algemeen de beste aanpak, zowel voor toegankelijkheid als bruikbaarheid.

Sass

Veel formuliervariabelen zijn op een algemeen niveau ingesteld om opnieuw te worden gebruikt en uit te breiden met individuele formuliercomponenten. Je zult deze het vaakst zien als $btn-input-*en $input-*variabelen.

Variabelen

$btn-input-*variabelen zijn gedeelde globale variabelen tussen onze knoppen en onze formuliercomponenten. U zult zien dat deze vaak opnieuw worden toegewezen als waarden aan andere componentspecifieke variabelen.

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