Forme
Esempii è linee d'utilizazione per stili di cuntrollu di forma, opzioni di layout è cumpunenti persunalizati per creà una larga varietà di forme.
Panoramica
I cuntrolli di forma di Bootstrap si sviluppanu nantu à i nostri stili di forma riavviata cù classi. Aduprate queste classi per optà per i so schermi persunalizati per un rendering più coherente in i navigatori è i dispositi.
Assicuratevi di utilizà un type
attributu appropritatu in tutti l'inputs (per esempiu, email
per l'indirizzu email o number
per l'infurmazioni numeriche) per prufittà di i cuntrolli di input più recenti cum'è verificazione di email, selezzione di numeri, è più.
Eccu un esempiu rapidu per dimustrà i stili di forma di Bootstrap. Continua a leghje per a documentazione nantu à e classi richieste, u layout di furmulariu, è più.
<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>
Forme testu
U testu di forma à livellu di bloccu o in linea pò esse creatu cù .form-text
.
Associà testu di forma cù cuntrolli di forma
U testu di u furmulariu deve esse assuciatu esplicitamente cù u cuntrollu di forma chì hè in relazione cù l'usu di l' aria-describedby
attributu. Questu hà da assicurà chì e tecnulugii d'assistenza, cum'è i lettori di schermu, annunceranu stu testu di forma quandu l'utilizatore focalizeghja o entra in u cuntrollu.
U testu di furmulariu sottu inputs pò esse stilatu cù .form-text
. Se un elementu di livellu di bloccu serà utilizatu, un margine superiore hè aghjuntu per un spaziu faciule da l'inputs sopra.
<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>
U testu in linea pò utilizà qualsiasi elementu HTML tipicu in linea (sia un <span>
, <small>
, o qualcosa d'altru) senza nunda più di a .form-text
classe.
<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>
Forme disabilitate
Aghjunghjite l' disabled
attributu booleanu nantu à un input per prevene l'interazzione di l'utilizatori è fà chì pare più liggeru.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Aghjunghjite l' disabled
attributu à a <fieldset>
per disattivà tutti i cuntrolli. I navigatori trattanu tutti i cuntrolli di forma nativa ( <input>
, <select>
, è <button>
elementi) in un <fieldset disabled>
cum'è disabilitatu, impediscendu l'interazzione di u teclatu è u mouse nantu à elli.
In ogni casu, se u vostru furmulariu include ancu elementi persunalizati cum'è un buttone cum'è <a class="btn btn-*">...</a>
, questi saranu solu un stile di pointer-events: none
, vale à dì chì sò sempre focalizzabili è operabili cù u teclatu. In questu casu, duvete mudificà manualmente questi cuntrolli aghjustendu tabindex="-1"
per impediscenu di riceve u focu è aria-disabled="disabled"
per signalà u so statu à e tecnulugia assistive.
<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>
L'accessibilità
Assicuratevi chì tutti i cuntrolli di forma anu un nome accessibile adattatu per chì u so scopu pò esse trasmessu à l'utilizatori di tecnulugii assistivi. U modu più sèmplice per ottene questu hè di utilizà un <label>
elementu, o - in u casu di i buttoni - per include un testu abbastanza descriptivu cum'è parte di u <button>...</button>
cuntenutu.
Per situazioni induve ùn hè micca pussibule include un <label>
cuntenutu di testu visibile o apprupriatu, ci sò modi alternativi di furnisce ancu un nome accessibile, cum'è:
<label>
elementi oculati cù a.visually-hidden
classa- Indicà à un elementu esistente chì pò agisce cum'è una etichetta utilizendu
aria-labelledby
- Fornisce un
title
attributu - Definisce esplicitamente u nome accessibile nantu à un elementu utilizendu
aria-label
Se nimu di questi ùn sò prisenti, i tecnulugii assistivi ponu ricorrere à l'usu di l' placeholder
attributu cum'è un fallback per u nome accessibile <input>
è <textarea>
elementi. L'esempii in questa sezione furniscenu uni pochi di approcci suggeriti, specifichi di casu.
Mentre aduprà u cuntenutu visualmente oculatu ( .visually-hidden
, aria-label
, è ancu placeholder
u cuntenutu, chì sparisce una volta chì un campu di furmulariu hà cuntenutu) beneficarà l'utilizatori di tecnulugia assistiva, a mancanza di testu di l'etichetta visibile pò ancu esse problematica per certi utilizatori. Qualchì forma di etichetta visibile hè in generale u megliu approcciu, sia per l'accessibilità sia per l'usabilità.
Sass
Parechje variabili di forma sò stabilite à un livellu generale per esse riutilizate è allargate da cumpunenti di forma individuale. Vi vede questi più spessu cum'è $btn-input-*
e $input-*
variàbili.
Variabili
$btn-input-*
e variàbili sò variabili glubale spartuti trà i nostri buttoni è i nostri cumpunenti di forma. Truverete questi spessu riassegnati cum'è valori à altre variàbili specifiche di cumpunenti.
$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;