Formularer
Eksempler og brugsretningslinjer for formularkontroltypografier, layoutindstillinger og brugerdefinerede komponenter til oprettelse af en bred vifte af 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 type
attribut på alle input (f.eks. email
til e-mailadresse eller number
til 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
.
Tilknytte formulartekst med formularkontrolelementer
Formulartekst skal være eksplicit knyttet til det formularkontrolelement, det relaterer til ved brug af aria-describedby
attributten. Dette vil sikre, at hjælpeteknologier – såsom skærmlæsere – annoncerer denne formulartekst, når brugeren fokuserer eller går ind i kontrollen.
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-text
klassen.
<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 disabled
booleske 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 disabled
attributten 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-hidden
klassen- Peger på et eksisterende element, der kan fungere som en etiket vha
aria-labelledby
- Angivelse af en
title
attribut - Eksplicit indstilling af det tilgængelige navn på et element ved hjælp af
aria-label
Hvis ingen af disse er til stede, kan hjælpeteknologier ty til at bruge placeholder
attributten 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 placeholder
indhold, 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 $btn-input-*
og $input-*
variabler.
Variabler
$btn-input-*
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;