Skjemaer
Eksempler og retningslinjer for bruk for skjemakontrollstiler, layoutalternativer og egendefinerte komponenter for å lage et bredt utvalg av 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 type
attributt på alle inndata (f.eks. email
for e-postadresse eller number
for 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
.
Knytte skjematekst til skjemakontroller
Skjematekst skal eksplisitt assosieres med skjemakontrollen den er knyttet til ved bruk av aria-describedby
attributtet. Dette vil sikre at hjelpeteknologier – for eksempel skjermlesere – vil kunngjøre denne skjemateksten når brukeren fokuserer eller går inn i kontrollen.
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-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>
Deaktiverte skjemaer
Legg til det disabled
boolske 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 disabled
attributtet 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-hidden
klassen- Peker på et eksisterende element som kan fungere som en etikett ved hjelp av
aria-labelledby
- Oppgi et
title
attributt - Eksplisitt angi det tilgjengelige navnet på et element ved hjelp av
aria-label
Hvis ingen av disse er til stede, kan hjelpeteknologier ty til å bruke placeholder
attributtet 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 placeholder
innhold, 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 $btn-input-*
og $input-*
variabler.
Variabler
$btn-input-*
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;