Formulieren
Foarbylden en gebrûksrjochtlinen foar formulierkontrôlestilen, opmaakopsjes en oanpaste komponinten foar it meitsjen fan in breed ferskaat oan formulieren.
Oersicht
De foarmkontrôles fan Bootstrap wreidzje út op ús Rebooted foarmstilen mei klassen. Brûk dizze klassen om te kiezen foar har oanpaste byldskermen foar in mear konsekwinte werjefte oer browsers en apparaten.
Wês wis dat jo in passend type
attribút brûke op alle ynputs (bygelyks email
foar e-mailadres of number
foar numerike ynformaasje) om foardiel te meitsjen fan nijere ynfierkontrôles lykas e-postferifikaasje, nûmerseleksje, en mear.
Hjir is in fluch foarbyld om de foarmstilen fan Bootstrap te demonstrearjen. Bliuw lêze foar dokumintaasje oer fereaske klassen, foarmyndieling, en mear.
<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>
Formulier tekst
Tekst op bloknivo of ynline-nivo kin makke wurde mei .form-text
.
Formtekst assosjearje mei formulierkontrôles
Formuliertekst moat eksplisyt ferbûn wurde mei de formulierkontrôle dy't it relatearret oan it brûken fan it aria-describedby
attribút. Dit sil derfoar soargje dat assistinte technologyen - lykas skermlêzers - dizze formuliertekst oankundigje as de brûker him rjochtet of de kontrôle yngiet.
Formuliertekst hjirûnder yngongen kinne wurde stylearre mei .form-text
. As in elemint op bloknivo brûkt wurdt, wurdt in topmarzje tafoege foar maklike ôfstân fan 'e yngongen hjirboppe.
<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>
Ynline tekst kin elk typysk ynline HTML-elemint brûke (it is in <span>
, <small>
, of wat oars) mei neat mear as de .form-text
klasse.
<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>
Utskeakele formulieren
Foegje it disabled
Booleaanske attribút ta oan in ynfier om ynteraksjes mei brûkers te foarkommen en it ljochter te meitsjen.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Foegje it disabled
attribút oan in <fieldset>
om alle kontrôles binnen út te skeakeljen. Blêders behannelje alle native foarmkontrôles ( <input>
, <select>
, en <button>
eleminten) binnen in <fieldset disabled>
as útskeakele, en foarkomme sawol toetseboerd as mûs ynteraksjes op har.
As jo formulier lykwols ek oanpaste knop-like eleminten omfettet, lykas <a class="btn btn-*">...</a>
, sille dizze allinich in styl krije fan pointer-events: none
, wat betsjut dat se noch fokusber binne en te betsjinjen binne mei it toetseboerd. Yn dit gefal moatte jo dizze kontrôles manuell wizigje troch ta te foegjen tabindex="-1"
om foar te kommen dat se fokus krije en aria-disabled="disabled"
har steat oan assistive technologyen sinjalearje.
<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>
Tagonklikheid
Soargje derfoar dat alle formulierkontrôles in passende tagonklike namme hawwe, sadat har doel kin wurde oerdroegen oan brûkers fan assistinte technologyen. De ienfâldichste manier om dit te berikken is in <label>
elemint te brûken, of - yn it gefal fan knoppen - genôch beskriuwende tekst op te nimmen as ûnderdiel fan 'e <button>...</button>
ynhâld.
Foar situaasjes dêr't it net mooglik is om in sichtbere <label>
of passende tekstynhâld op te nimmen, binne d'r alternative manieren om noch in tagonklike namme te jaan, lykas:
<label>
eleminten ferburgen mei help fan de.visually-hidden
klasse- Ferwizend nei in besteand elemint dat kin fungearje as in label mei help
aria-labelledby
- It jaan fan in
title
attribút - De tagonklike namme eksplisyt ynstelle op in elemint mei
aria-label
As net ien fan dizze is oanwêzich, kinne assistinte technologyen taflecht ta it brûken fan it placeholder
attribút as in fallback foar de tagonklike namme op <input>
en <textarea>
eleminten. De foarbylden yn dizze seksje jouwe in pear foarstelde, saakspesifike oanpak.
Wylst it brûken fan fisueel ferburgen ynhâld ( .visually-hidden
, aria-label
, en sels placeholder
ynhâld, dy't ferdwynt ienris in formulierfjild ynhâld hat) sil helpe technology brûkers profitearje, in gebrek oan sichtbere labeltekst kin noch problematysk wêze foar bepaalde brûkers. Guon foarm fan sichtber label is oer it algemien de bêste oanpak, sawol foar tagonklikens as brûkberens.
Sass
In protte formulierfariabelen wurde op in algemien nivo ynsteld om opnij te brûken en útwreide troch yndividuele formulierkomponinten. Jo sille dizze meastentiids sjen as $btn-input-*
en $input-*
fariabelen.
Fariabelen
$btn-input-*
fariabelen binne dield globale fariabelen tusken ús knoppen en ús formulier komponinten. Jo sille dizze faaks opnij tawize as wearden nei oare komponint-spesifike fariabelen.
$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;