Formularer

Oversigt

Bootstraps formularkontrolelementer udvider vores genstartede formularstile med klasser. Brug disse klasser til at tilvælge deres tilpassede skærme for en mere ensartet gengivelse på tværs af browsere og enheder.

Sørg for at bruge en passende typeattribut på alle input (f.eks. emailtil e-mailadresse eller numbertil numerisk information) for at drage fordel af nyere inputkontroller som e-mailbekræftelse, nummervalg og mere.

Her er et hurtigt eksempel for at demonstrere Bootstraps formstile. Fortsæt med at læse for dokumentation om obligatoriske klasser, formularlayout og mere.

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

Formtekst på blokniveau eller inline-niveau kan oprettes ved hjælp af .form-text.

Formulartekst under input kan styles med .form-text. Hvis et element på blokniveau vil blive brugt, tilføjes en topmargen for nem afstand fra inputs ovenfor.

<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 bruge et hvilket som helst typisk inline HTML-element (det være sig et <span>, <small>, eller noget andet) med intet mere end .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>

Deaktiverede formularer

Tilføj den disabledbooleske attribut på et input for at forhindre brugerinteraktioner og få det til at virke lettere.

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

Føj disabledattributten til a <fieldset>for at deaktivere alle kontrolelementerne indeni. Browsere behandler alle indbyggede formularkontrolelementer ( <input>, <select>, og <button>elementer) inde i en <fieldset disabled>som deaktiveret, hvilket forhindrer både tastatur- og muse-interaktioner på dem.

Men hvis din formular også indeholder brugerdefinerede knaplignende elementer såsom <a class="btn btn-*">...</a>, vil disse kun få en stil på pointer-events: none, hvilket betyder, at de stadig kan fokuseres og betjenes ved hjælp af tastaturet. I dette tilfælde skal du manuelt ændre disse kontroller ved at tilføje tabindex="-1"for at forhindre dem i at modtage fokus og aria-disabled="disabled"for at signalere deres tilstand til hjælpeteknologier.

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

Tilgængelighed

Sørg for, at alle formularkontrolelementer har et passende tilgængeligt navn, så deres formål kan formidles til brugere af hjælpeteknologier. Den enkleste måde at opnå dette på er at bruge et <label>element, eller - i tilfælde af knapper - at inkludere tilstrækkeligt beskrivende tekst som en del af <button>...</button>indholdet.

I situationer, hvor det ikke er muligt at inkludere et synligt <label>eller passende tekstindhold, er der alternative måder at give et tilgængeligt navn på, såsom:

• <label>elementer skjult ved hjælp af .visually-hiddenklassen
• Peger på et eksisterende element, der kan fungere som en etiket vhaaria-labelledby
• Angivelse af en titleattribut
• Eksplicit indstilling af det tilgængelige navn på et element ved hjælp afaria-label

Hvis ingen af ​​disse er til stede, kan hjælpeteknologier ty til at bruge placeholderattributten som en reserve for det tilgængelige navn på <input>og <textarea>elementer. Eksemplerne i dette afsnit giver et par foreslåede, case-specifikke tilgange.

Mens brug af visuelt skjult indhold ( .visually-hidden, aria-label, og endda placeholderindhold, som forsvinder, når et formularfelt har indhold) vil gavne brugere af hjælpeteknologi, kan mangel på synlig etikettekst stadig være problematisk for visse brugere. En form for synlig etiket er generelt den bedste tilgang, både for tilgængelighed og brugervenlighed.

Sass

Mange formularvariabler er sat på et generelt niveau for at blive genbrugt og udvidet med individuelle formularkomponenter. Du vil oftest se disse som $input-btn-*og $input-*variabler.

Variabler

$input-btn-*variabler er delte globale variabler mellem vores knapper og vores formularkomponenter. Du vil finde disse ofte omtildelt som værdier til andre komponent-specifikke 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;