Blanketter

Översikt

Bootstraps formulärkontroller expanderar på våra omstartade formulärstilar med klasser. Använd dessa klasser för att välja deras anpassade skärmar för en mer konsekvent rendering över webbläsare och enheter.

Se till att använda ett lämpligt typeattribut på alla ingångar (t.ex. emailför e-postadresser eller numberför numerisk information) för att dra nytta av nyare inmatningskontroller som e-postverifiering, nummerval och mer.

Här är ett snabbt exempel för att demonstrera Bootstraps formstilar. Fortsätt läsa för dokumentation om obligatoriska klasser, formulärlayout och mer.

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

Formtext

Formtext på blocknivå eller inline-nivå kan skapas med .form-text.

Formulärtext under inmatningar kan formateras med .form-text. Om ett element på blocknivå kommer att användas, läggs en övre marginal till för enkelt avstånd från ingångarna ovan.

<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 kan använda vilket typiskt inline HTML-element som helst (vare sig det är en <span>, <small>, eller något annat) med inget annat än .form-textklassen.

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

Inaktiverade formulär

Lägg till det disabledbooleska attributet på en ingång för att förhindra användarinteraktioner och få den att se lättare ut.

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

Lägg till disabledattributet till a <fieldset>för att inaktivera alla kontroller inom. Webbläsare behandlar alla inbyggda formulärkontroller ( <input>, <select>, och <button>element) i en <fieldset disabled>som inaktiverade, vilket förhindrar interaktion med både tangentbord och mus på dem.

Men om ditt formulär också innehåller anpassade knappliknande element som <a class="btn btn-*">...</a>, kommer dessa bara att ges stilen pointer-events: none, vilket innebär att de fortfarande är fokuserbara och kan användas med tangentbordet. I det här fallet måste du manuellt ändra dessa kontroller genom att lägga tabindex="-1"till för att förhindra att de får fokus och aria-disabled="disabled"för att signalera deras tillstånd till hjälpmedelstekniker.

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

Tillgänglighet

Se till att alla formulärkontroller har ett lämpligt tillgängligt namn så att deras syfte kan förmedlas till användare av hjälpmedel. Det enklaste sättet att uppnå detta är att använda ett <label>element, eller – när det gäller knappar – att inkludera tillräckligt beskrivande text som en del av <button>...</button>innehållet.

För situationer där det inte är möjligt att inkludera ett synligt <label>eller lämpligt textinnehåll, finns det alternativa sätt att fortfarande tillhandahålla ett tillgängligt namn, till exempel:

• <label>element dolda med .visually-hiddenklassen
• Pekar på ett befintligt element som kan fungera som en etikett med hjälp avaria-labelledby
• Att tillhandahålla ett titleattribut
• Att uttryckligen ställa in det tillgängliga namnet på ett element med hjälp avaria-label

Om ingen av dessa finns, kan hjälpmedel använda placeholderattributet som en reserv för det tillgängliga namnet på <input>och <textarea>element. Exemplen i det här avsnittet ger några förslag på fallspecifika tillvägagångssätt.

Även om användning av visuellt dolt innehåll ( .visually-hidden, aria-label, och till och med placeholderinnehåll, som försvinner när ett formulärfält har innehåll) kommer att gynna användare av hjälpmedelsteknik, kan bristen på synlig etiketttext fortfarande vara problematisk för vissa användare. Någon form av synlig etikett är generellt sett det bästa sättet, både för tillgänglighet och användbarhet.

Sass

Många formulärvariabler är inställda på en generell nivå för att kunna återanvändas och utökas med individuella formulärkomponenter. Du kommer att se dessa oftast som $btn-input-*och $input-*variabler.

Variabler

$btn-input-*variabler är delade globala variabler mellan våra knappar och våra formulärkomponenter. Du hittar dessa ofta omtilldelade som värden till andra komponentspecifika variabler.

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