Obrasci
Primjeri i smjernice za korištenje stilova kontrole obrazaca, opcija izgleda i prilagođenih komponenti za stvaranje širokog spektra obrazaca.
Pregled
Bootstrapove kontrole obrazaca proširuju naše Rebooted stilove obrazaca s klasama. Upotrijebite ove klase da biste se uključili u njihove prilagođene prikaze za dosljednije prikazivanje na svim preglednicima i uređajima.
Obavezno upotrijebite odgovarajući type
atribut na svim unosima (npr. email
za adresu e-pošte ili number
za numeričke informacije) kako biste iskoristili prednosti novijih kontrola unosa kao što su potvrda e-pošte, odabir broja i više.
Evo kratkog primjera za demonstraciju stilova obrasca Bootstrapa. Nastavite čitati za dokumentaciju o potrebnim razredima, izgledu obrazaca i više.
<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>
Tekst obrasca
Tekst obrasca na razini bloka ili na razini inline može se stvoriti pomoću .form-text
.
Povezivanje teksta obrasca s kontrolama obrasca
Tekst obrasca treba biti eksplicitno povezan s kontrolom obrasca na koju se odnosi pomoću aria-describedby
atributa. Ovo će osigurati da će pomoćne tehnologije - kao što su čitači zaslona - najaviti ovaj tekst obrasca kada se korisnik fokusira ili uđe u kontrolu.
Tekst obrasca ispod unosa može se stilizirati s .form-text
. Ako će se koristiti element na razini bloka, dodaje se gornja margina za jednostavno odvajanje od gornjih unosa.
<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>
Umetnuti tekst može koristiti bilo koji tipični umetnuti HTML element (bio to <span>
, <small>
, ili nešto drugo) samo s .form-text
klasom.
<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>
Onesposobljeni oblici
Dodajte disabled
booleov atribut na unos kako biste spriječili interakcije korisnika i učinili da izgleda svjetlije.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Dodajte disabled
atribut u <fieldset>
da biste onemogućili sve unutarnje kontrole. Preglednici tretiraju sve izvorne kontrole obrasca ( <input>
, <select>
, i <button>
elementi) unutar <fieldset disabled>
kao onemogućene, sprječavajući interakcije tipkovnice i miša na njima.
Međutim, ako vaš obrazac uključuje i prilagođene elemente nalik na gumbe kao što je <a class="btn btn-*">...</a>
, njima će se dodijeliti samo stil pointer-events: none
, što znači da se i dalje mogu fokusirati i njima se može upravljati pomoću tipkovnice. U tom slučaju morate ručno modificirati ove kontrole dodavanjem tabindex="-1"
kako biste spriječili primanje fokusa i aria-disabled="disabled"
signalizirali njihovo stanje pomoćnim tehnologijama.
<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>
Pristupačnost
Osigurajte da sve kontrole obrasca imaju odgovarajuće dostupno ime kako bi se njihova svrha mogla prenijeti korisnicima pomoćnih tehnologija. Najjednostavniji način da to postignete je korištenje <label>
elementa ili – u slučaju gumba – uključivanje dovoljno opisnog teksta kao dijela <button>...</button>
sadržaja.
Za situacije u kojima nije moguće uključiti vidljiv <label>
ili prikladan tekstualni sadržaj, postoje alternativni načini pružanja dostupnog naziva, kao što su:
<label>
elementi skriveni pomoću.visually-hidden
klase- Pokazivanje na postojeći element koji može djelovati kao oznaka pomoću
aria-labelledby
- Pružanje
title
atributa - Eksplicitno postavljanje pristupačnog imena na element pomoću
aria-label
Ako ništa od toga nije prisutno, pomoćne tehnologije mogu pribjeći korištenju placeholder
atributa kao zamjene za dostupno ime na <input>
i <textarea>
elementima. Primjeri u ovom odjeljku daju nekoliko predloženih pristupa specifičnih za slučaj.
Iako će korištenje vizualno skrivenog sadržaja ( .visually-hidden
, aria-label
, pa čak i placeholder
sadržaja, koji nestaje nakon što polje obrasca ima sadržaj) koristiti korisnicima pomoćne tehnologije, nedostatak vidljivog teksta naljepnice još uvijek može biti problematičan za određene korisnike. Neki oblik vidljive oznake općenito je najbolji pristup, kako za pristupačnost tako i za upotrebljivost.
Sass
Mnoge varijable obrasca postavljene su na općoj razini kako bi se ponovno koristile i proširivale pojedinačne komponente obrasca. To ćete najčešće vidjeti kao varijable $btn-input-*
i .$input-*
Varijable
$btn-input-*
varijable su zajedničke globalne varijable između naših gumba i komponenti obrasca. Naći ćete da se one često ponovno dodjeljuju kao vrijednosti drugim varijablama specifičnim za komponente.
$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;