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 typeattributu appropritatu in tutti l'inputs (per esempiu, emailper l'indirizzu email o numberper 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.

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-textclasse.

<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' disabledattributu 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' disabledattributu à 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-hiddenclassa
• Indicà à un elementu esistente chì pò agisce cum'è una etichetta utilizenduaria-labelledby
• Fornisce un titleattributu
• Definisce esplicitamente u nome accessibile nantu à un elementu utilizenduaria-label

Se nimu di questi ùn sò prisenti, i tecnulugii assistivi ponu ricorrere à l'usu di l' placeholderattributu 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 placeholderu 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;