Le forme

Panoramica

I controlli dei moduli di Bootstrap espandono i nostri stili di modulo Riavviato con le classi. Usa queste classi per attivare i loro display personalizzati per un rendering più coerente su browser e dispositivi.

Assicurati di utilizzare un typeattributo appropriato su tutti gli input (ad esempio, emailper l'indirizzo e-mail o numberper informazioni numeriche) per sfruttare i nuovi controlli di input come la verifica dell'e-mail, la selezione del numero e altro.

Ecco un rapido esempio per dimostrare gli stili dei moduli di Bootstrap. Continua a leggere per la documentazione sulle classi richieste, sul layout dei moduli e altro ancora.

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

Testo del modulo

Il testo del modulo a livello di blocco o in linea può essere creato utilizzando .form-text.

Il testo del modulo sotto gli input può essere disegnato con .form-text. Se verrà utilizzato un elemento a livello di blocco, viene aggiunto un margine superiore per una facile spaziatura dagli input 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>

Il testo in linea può utilizzare qualsiasi tipico elemento HTML in linea (sia esso un <span>, <small>o qualcos'altro) con nient'altro che la .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>

Moduli disabilitati

Aggiungi l' disabledattributo booleano su un input per impedire le interazioni dell'utente e renderlo più leggero.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Aggiungi l' disabledattributo a a <fieldset>per disabilitare tutti i controlli all'interno. I browser trattano tutti i controlli dei moduli nativi ( <input>, <select>, ed <button>elementi) all'interno di a <fieldset disabled>come disabilitati, impedendo interazioni con la tastiera e con il mouse su di essi.

Tuttavia, se il tuo modulo include anche elementi simili a pulsanti personalizzati come <a class="btn btn-*">...</a>, a questi verrà assegnato solo uno stile di pointer-events: none, il che significa che sono ancora attivabili e utilizzabili utilizzando la tastiera. In questo caso, è necessario modificare manualmente questi controlli aggiungendoli tabindex="-1"per evitare che ricevano il focus e aria-disabled="disabled"per segnalare il loro stato alle tecnologie 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>

Accessibilità

Garantire che tutti i controlli dei moduli abbiano un nome accessibile appropriato in modo che il loro scopo possa essere comunicato agli utenti delle tecnologie assistive. Il modo più semplice per ottenere ciò è utilizzare un <label>elemento o, nel caso dei pulsanti, includere un testo sufficientemente descrittivo come parte del <button>...</button>contenuto.

Per le situazioni in cui non è possibile includere un <label>contenuto di testo visibile o appropriato, esistono modi alternativi per fornire comunque un nome accessibile, come ad esempio:

• <label>elementi nascosti usando la .visually-hiddenclasse
• Puntando a un elemento esistente che può fungere da etichetta utilizzandoaria-labelledby
• Fornire un titleattributo
• Impostazione esplicita del nome accessibile su un elemento utilizzandoaria-label

Se nessuno di questi è presente, le tecnologie assistive possono ricorrere all'utilizzo placeholderdell'attributo come fallback per il nome accessibile su <input>e <textarea>gli elementi. Gli esempi in questa sezione forniscono alcuni approcci suggeriti e specifici per il caso.

Sebbene l'utilizzo di contenuti nascosti visivamente ( .visually-hidden, aria-label, e persino placeholdercontenuti, che scompaiono una volta che un campo del modulo ha contenuto) andrà a vantaggio degli utenti di tecnologie assistive, la mancanza di testo dell'etichetta visibile può comunque essere problematica per alcuni utenti. Una qualche forma di etichetta visibile è generalmente l'approccio migliore, sia per l'accessibilità che per l'usabilità.

Sass

Molte variabili del modulo sono impostate a livello generale per essere riutilizzate ed estese dai singoli componenti del modulo. Vedrai questi più spesso come $btn-input-*e $input-*variabili.

Variabili

$btn-input-*le variabili sono variabili globali condivise tra i nostri pulsanti e i nostri componenti del modulo. Li troverai frequentemente riassegnati come valori ad altre variabili specifiche del componente.

$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;