Skjemaer

Oversikt

Bootstraps skjemakontroller utvider seg til våre Rebooted-skjemastiler med klasser. Bruk disse klassene til å velge de tilpassede skjermene deres for en mer konsistent gjengivelse på tvers av nettlesere og enheter.

Sørg for å bruke et passende typeattributt på alle inndata (f.eks. emailfor e-postadresse eller numberfor numerisk informasjon) for å dra nytte av nyere inndatakontroller som e-postbekreftelse, nummervalg og mer.

Her er et raskt eksempel for å demonstrere Bootstraps formstiler. Fortsett å lese for dokumentasjon om obligatoriske klasser, skjemaoppsett og 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>

Skjematekst

Skjematekst på blokknivå eller innebygd nivå kan opprettes ved å bruke .form-text.

Skjematekst under inndata kan styles med .form-text. Hvis et blokknivåelement skal brukes, legges en toppmargin til for enkel avstand fra inngangene 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>

Innebygd tekst kan bruke et hvilket som helst typisk innebygd HTML-element (det være seg et <span>, <small>, eller noe annet) med ikke mer enn .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>

Deaktiverte skjemaer

Legg til det disabledboolske attributtet på en inngang for å forhindre brukerinteraksjoner og få den til å virke lettere.

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

Legg til disabledattributtet til a <fieldset>for å deaktivere alle kontrollene innenfor. Nettlesere behandler alle innfødte skjemakontroller ( <input>, <select>, og <button>elementer) i en <fieldset disabled>som deaktivert, og forhindrer både tastatur- og musinteraksjoner på dem.

Men hvis skjemaet ditt også inneholder egendefinerte knapplignende elementer som <a class="btn btn-*">...</a>, vil disse bare bli gitt en stil på pointer-events: none, noe som betyr at de fortsatt kan fokuseres og betjenes med tastaturet. I dette tilfellet må du manuelt endre disse kontrollene ved å legge tabindex="-1"til for å forhindre at de får fokus og aria-disabled="disabled"for å signalisere tilstanden deres til hjelpeteknologier.

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

tilgjengelighet

Sørg for at alle skjemakontroller har et passende tilgjengelig navn slik at formålet deres kan formidles til brukere av hjelpemidler. Den enkleste måten å oppnå dette på er å bruke et <label>element, eller – når det gjelder knapper – å inkludere tilstrekkelig beskrivende tekst som en del av <button>...</button>innholdet.

For situasjoner der det ikke er mulig å inkludere et synlig <label>eller passende tekstinnhold, er det alternative måter å fortsatt oppgi et tilgjengelig navn på, for eksempel:

• <label>elementer som er skjult ved hjelp av .visually-hiddenklassen
• Peker på et eksisterende element som kan fungere som en etikett ved hjelp avaria-labelledby
• Oppgi et titleattributt
• Eksplisitt angi det tilgjengelige navnet på et element ved hjelp avaria-label

Hvis ingen av disse er til stede, kan hjelpeteknologier ty til å bruke placeholderattributtet som en reserve for det tilgjengelige navnet på <input>og <textarea>elementene. Eksemplene i denne delen gir noen foreslåtte saksspesifikke tilnærminger.

Selv om bruk av visuelt skjult innhold ( .visually-hidden, aria-label, og til og med placeholderinnhold, som forsvinner når et skjemafelt har innhold) vil være til fordel for brukere av hjelpemiddelteknologi, kan mangel på synlig etiketttekst fortsatt være problematisk for enkelte brukere. En eller annen form for synlig merkelapp er generelt den beste tilnærmingen, både for tilgjengelighet og brukervennlighet.

Sass

Mange skjemavariabler er satt på et generelt nivå for å bli gjenbrukt og utvidet med individuelle skjemakomponenter. Du vil se disse oftest som $input-btn-*og $input-*variabler.

Variabler

$input-btn-*variabler er delte globale variabler mellom våre knapper og våre skjemakomponenter. Du finner disse ofte omtilordnet som verdier til andre komponentspesifikke 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;