Source

Le forme

Esempi e linee guida per l'utilizzo di stili di controllo dei moduli, opzioni di layout e componenti personalizzati per la creazione di un'ampia varietà di moduli.

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.

Non condivideremo mai la tua email con nessun altro. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

Controlli dei moduli

I controlli del modulo testuale, come <input>s, <select>s e <textarea>s, hanno uno stile con la .form-controlclasse. Sono inclusi gli stili per l'aspetto generale, lo stato di messa a fuoco, il dimensionamento e altro ancora.

Assicurati di esplorare i nostri moduli personalizzati per ulteriori stili <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Per gli input di file, scambiare .form-controlper .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Dimensionamento

Imposta le altezze usando classi come .form-control-lge .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Sola lettura

Aggiungi l' readonlyattributo booleano su un input per impedire la modifica del valore dell'input. Gli input di sola lettura appaiono più chiari (proprio come gli input disabilitati), ma mantengono il cursore standard.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Testo in chiaro di sola lettura

Se si desidera avere <input readonly>elementi nel modulo con lo stile di testo normale, utilizzare la .form-control-plaintextclasse per rimuovere lo stile predefinito del campo del modulo e preservare il margine e il riempimento corretti.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Caselle di controllo e radio

Le caselle di controllo e le radio predefinite sono migliorate con l'aiuto di .form-checkun'unica classe per entrambi i tipi di input che migliora il layout e il comportamento dei loro elementi HTML . Le caselle di controllo servono per selezionare una o più opzioni in un elenco, mentre le radio servono per selezionare un'opzione tra molte.

Le caselle di controllo e le radio disabilitate sono supportate, ma per fornire un not-allowedcursore al passaggio del mouse sul genitore <label>, dovrai aggiungere l' disabledattributo al file .form-check-input. L'attributo disabilitato applicherà un colore più chiaro per aiutare a indicare lo stato dell'input.

Le caselle di controllo e le radio utilizzate sono costruite per supportare la convalida dei moduli basata su HTML e fornire etichette concise e accessibili. In quanto tali, i nostri <input>s e <label>s sono elementi fratelli al contrario di un <input>all'interno di un <label>. Questo è leggermente più dettagliato in quanto è necessario specificare ide forattributi per mettere in relazione <input>e <label>.

Predefinito (impilato)

Per impostazione predefinita, qualsiasi numero di caselle di controllo e radio che sono fratelli immediati sarà impilato verticalmente e opportunamente distanziato con .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

In linea

Raggruppa caselle di controllo o radio sulla stessa riga orizzontale aggiungendo .form-check-inlinea qualsiasi .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Senza etichette

Aggiungi .position-staticagli input all'interno .form-checkche non hanno alcun testo dell'etichetta. Ricordarsi di fornire comunque una qualche forma di etichetta per le tecnologie assistive (ad esempio, utilizzando aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Disposizione

Poiché Bootstrap si applica display: blocka width: 100%quasi tutti i nostri controlli dei moduli, per impostazione predefinita i moduli verranno impilati verticalmente. È possibile utilizzare classi aggiuntive per variare questo layout in base alle prestazioni.

Gruppi di forma

La .form-groupclasse è il modo più semplice per aggiungere una struttura ai moduli. Fornisce una classe flessibile che incoraggia il raggruppamento corretto di etichette, controlli, testo della guida facoltativo e messaggistica di convalida dei moduli. Per impostazione predefinita si applica solo margin-bottom, ma raccoglie stili aggiuntivi .form-inlinesecondo necessità. Usalo con <fieldset>s, <div>s o quasi qualsiasi altro elemento.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Griglia del modulo

È possibile creare moduli più complessi utilizzando le nostre classi di griglia. Usali per layout di moduli che richiedono più colonne, larghezze diverse e opzioni di allineamento aggiuntive.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Riga del modulo

Puoi anche scambiare .rowcon .form-row, una variazione della nostra riga della griglia standard che sovrascrive le grondaie delle colonne predefinite per layout più stretti e compatti.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

È anche possibile creare layout più complessi con il sistema a griglia.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Forma orizzontale

Crea moduli orizzontali con la griglia aggiungendo la .rowclasse ai gruppi di moduli e utilizzando le .col-*-*classi per specificare la larghezza delle etichette e dei controlli. Assicurati di aggiungere .col-form-labelanche i tuoi <label>messaggi di posta elettronica in modo che siano centrati verticalmente con i controlli del modulo associati.

A volte, potrebbe essere necessario utilizzare le utilità di margine o riempimento per creare l'allineamento perfetto di cui hai bisogno. Ad esempio, abbiamo rimosso l' padding-topetichetta degli ingressi radio impilati per allineare meglio la linea di base del testo.

radio
Casella di controllo 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Dimensionamento etichetta a modulo orizzontale

Assicurati di utilizzare .col-form-label-smo .col-form-label-lgai tuoi <label>s o <legend>s per seguire correttamente le dimensioni di .form-control-lge .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Dimensionamento della colonna

Come mostrato negli esempi precedenti, il nostro sistema a griglia consente di posizionare un numero qualsiasi di .cols all'interno di un .rowo .form-row. Divideranno equamente la larghezza disponibile tra di loro. Puoi anche scegliere un sottoinsieme delle tue colonne per occupare più o meno spazio, mentre i restanti .cols dividono equamente il resto, con classi di colonne specifiche come .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Ridimensionamento automatico

L'esempio seguente utilizza un'utilità flexbox per centrare verticalmente il contenuto e le modifiche .colin .col-automodo che le colonne occupino solo lo spazio necessario. In altre parole, la colonna si ridimensiona in base al contenuto.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Puoi quindi remixarlo ancora una volta con classi di colonne specifiche per dimensione.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

E ovviamente sono supportati i controlli dei moduli personalizzati .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Moduli in linea

Utilizzare la .form-inlineclasse per visualizzare una serie di etichette, controlli modulo e pulsanti su una singola riga orizzontale. I controlli dei moduli all'interno dei moduli inline variano leggermente dai loro stati predefiniti.

  • I controlli sono display: flex, che comprimono qualsiasi spazio vuoto HTML e consentono di fornire il controllo dell'allineamento con le utilità di spaziatura e flexbox .
  • I controlli ei gruppi di input ricevono width: autoper sovrascrivere l'impostazione predefinita Bootstrap width: 100%.
  • I controlli vengono visualizzati solo in linea nelle finestre di almeno 576 pixel di larghezza per tenere conto delle finestre strette sui dispositivi mobili.

Potrebbe essere necessario indirizzare manualmente la larghezza e l'allineamento dei singoli controlli dei moduli con le utilità di spaziatura (come mostrato di seguito). Infine, assicurati di includere sempre un <label>controllo con ogni modulo, anche se devi nasconderlo ai visitatori non di screen reader con .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Sono supportati anche i controlli e le selezioni dei moduli personalizzati.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternative alle etichette nascoste

Le tecnologie assistive come le utilità per la lettura dello schermo avranno problemi con i tuoi moduli se non includi un'etichetta per ogni input. Per questi moduli in linea, puoi nascondere le etichette utilizzando la .sr-onlyclasse. Esistono ulteriori metodi alternativi per fornire un'etichetta per le tecnologie assistive, come l' attributo aria-label, aria-labelledbyo . titleSe nessuno di questi è presente, le tecnologie assistive possono ricorrere all'utilizzo placeholderdell'attributo, se presente, ma si noti che l'uso placeholderin sostituzione di altri metodi di etichettatura non è consigliato.

Testo guida

Il testo della guida a livello di blocco nei moduli può essere creato utilizzando .form-text(precedentemente noto come .help-blockin v3). Il testo della guida in linea può essere implementato in modo flessibile utilizzando qualsiasi elemento HTML in linea e classi di utilità come .text-muted.

Associazione del testo della guida ai controlli dei moduli

Il testo della guida deve essere esplicitamente associato al controllo del modulo a cui si riferisce utilizzando l' aria-describedbyattributo. Ciò garantirà che le tecnologie assistive, come le utilità per la lettura dello schermo, annunceranno questo testo della guida quando l'utente si concentra o accede al controllo.

Il testo della guida sotto gli input può essere disegnato con .form-text. Questa classe include display: blocke aggiunge un margine superiore per una facile spaziatura dagli input sopra.

La tua password deve contenere da 8 a 20 caratteri, contenere lettere e numeri e non deve contenere spazi, caratteri speciali o emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Il testo in linea può utilizzare qualsiasi tipico elemento HTML in linea (sia esso un <small>, <span>o qualcos'altro) con nient'altro che una classe di utilità.

Deve contenere 8-20 caratteri. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Avvertimento con ancore

Per impostazione predefinita, i browser tratteranno tutti i controlli dei moduli nativi ( <input>, <select>e <button>gli elementi) all'interno di a <fieldset disabled>come disabilitati, impedendo interazioni sia con la tastiera che con il mouse su di essi. Tuttavia, se il tuo modulo include anche <a ... class="btn btn-*">elementi, a questi verrà assegnato solo uno stile di pointer-events: none. Come notato nella sezione sullo stato disabilitato per i pulsanti (e in particolare nella sottosezione per gli elementi di ancoraggio), questa proprietà CSS non è ancora standardizzata e non è completamente supportata in Opera 18 e precedenti, o in Internet Explorer 10, e ha vinto non impedisce agli utenti della tastiera di mettere a fuoco o attivare questi collegamenti. Quindi, per sicurezza, usa JavaScript personalizzato per disabilitare tali collegamenti.

Compatibilità tra browser

Sebbene Bootstrap applichi questi stili in tutti i browser, Internet Explorer 11 e versioni precedenti non supportano completamente l' disabledattributo su un file <fieldset>. Usa JavaScript personalizzato per disabilitare il fieldset in questi browser.

Convalida

Fornisci feedback utili e fruibili ai tuoi utenti con la convalida dei moduli HTML5, disponibile in tutti i nostri browser supportati . Scegli dal feedback di convalida predefinito del browser o implementa messaggi personalizzati con le nostre classi integrate e JavaScript di base.

Consigliamo vivamente stili di convalida personalizzati poiché le impostazioni predefinite del browser nativo non vengono annunciate agli screen reader.

Come funziona

Ecco come funziona la convalida dei moduli con Bootstrap:

  • La convalida del modulo HTML viene applicata tramite le due pseudo-classi CSS :invalide :valid. Si applica agli elementi <input>, <select>, e <textarea>.
  • Bootstrap ha come ambito gli stili :invalide la classe padre, solitamente applicata alla classe . In caso contrario, qualsiasi campo obbligatorio senza un valore viene visualizzato come non valido al caricamento della pagina. In questo modo, puoi scegliere quando attivarli (in genere dopo aver tentato l'invio del modulo).:valid.was-validated<form>
  • Come fallback, .is-invalide .is-validle classi possono essere utilizzate al posto delle pseudo-classi per la convalida lato server . Non richiedono una .was-validatedclasse genitore.
  • A causa dei vincoli nel modo in cui funziona CSS, non possiamo (attualmente) applicare stili a un <label>controllo che precede un modulo nel DOM senza l'aiuto di JavaScript personalizzato.
  • Tutti i browser moderni supportano l' API di convalida dei vincoli , una serie di metodi JavaScript per la convalida dei controlli dei moduli.
  • I messaggi di feedback possono utilizzare le impostazioni predefinite del browser (diverse per ciascun browser e non modificabili tramite CSS) o i nostri stili di feedback personalizzati con HTML e CSS aggiuntivi.
  • Puoi fornire messaggi di validità personalizzati con setCustomValidityJavaScript.

Con questo in mente, considera le seguenti demo per i nostri stili di convalida dei moduli personalizzati, classi lato server opzionali e impostazioni predefinite del browser.

Stili personalizzati

Per i messaggi di convalida del modulo Bootstrap personalizzati, dovrai aggiungere l' novalidateattributo booleano al tuo file <form>. Ciò disabilita i suggerimenti di feedback predefiniti del browser, ma fornisce comunque l'accesso alle API di convalida dei moduli in JavaScript. Prova a inviare il modulo sottostante; il nostro JavaScript intercetterà il pulsante di invio e ti trasmetterà il feedback.

Quando tenti di inviare, vedrai gli stili :invalide :validapplicati ai controlli del modulo.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Impostazioni predefinite del browser

Non sei interessato ai messaggi di feedback di convalida personalizzati o alla scrittura di JavaScript per modificare i comportamenti dei moduli? Tutto bene, puoi usare le impostazioni predefinite del browser. Prova a inviare il modulo sottostante. A seconda del browser e del sistema operativo, vedrai uno stile di feedback leggermente diverso.

Sebbene questi stili di feedback non possano essere stilizzati con CSS, puoi comunque personalizzare il testo del feedback tramite JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Lato server

Si consiglia di utilizzare la convalida lato client, ma nel caso in cui si richieda lato server, è possibile indicare campi modulo non validi e validi con .is-invalide .is-valid. Nota che .invalid-feedbackè supportato anche con queste classi.

Sembra buono!
Sembra buono!
@
Scegli un nome utente.
Si prega di fornire una città valida.
Si prega di fornire uno stato valido.
Si prega di fornire un codice postale valido.
Devi essere d'accordo prima di inviare. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elementi supportati

I nostri moduli di esempio mostrano i messaggi di testo nativi <input>sopra, ma gli stili di convalida dei moduli sono disponibili anche per i nostri controlli dei moduli personalizzati.

Esempio di testo di feedback non valido
Altro testo di feedback non valido di esempio
Esempio di feedback di selezione personalizzato non valido
Esempio di feedback su file personalizzato non valido 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Suggerimenti

Se il layout del tuo modulo lo consente, puoi scambiare le .{valid|invalid}-feedbackclassi con le .{valid|invalid}-tooltipclassi per visualizzare il feedback di convalida in una descrizione comando con stile. Assicurati di avere un genitore con position: relativeesso per il posizionamento del suggerimento. Nell'esempio seguente, le nostre classi di colonne lo hanno già, ma il tuo progetto potrebbe richiedere una configurazione alternativa.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Moduli personalizzati

Per una personalizzazione ancora maggiore e una coerenza tra browser diversi, utilizza i nostri elementi del modulo completamente personalizzati per sostituire le impostazioni predefinite del browser. Sono basati su markup semantico e accessibile, quindi sono solidi sostituti per qualsiasi controllo di modulo predefinito.

Caselle di controllo e radio

Ogni casella di controllo e radio è racchiusa in una <div>con un fratello <span>per creare il nostro controllo personalizzato e una <label>per il testo di accompagnamento. Strutturalmente, questo è lo stesso approccio del nostro default .form-check.

Usiamo il selettore di pari livello ( ~) per tutti i nostri <input>stati, ad esempio :checked, per modellare correttamente il nostro indicatore di modulo personalizzato. In combinazione con la .custom-control-labelclasse, possiamo anche definire lo stile del testo per ogni elemento in base allo <input>stato di '.

Nascondiamo l'impostazione predefinita <input>con opacitye utilizziamo .custom-control-labelper creare un nuovo indicatore di modulo personalizzato al suo posto con ::beforee ::after. Sfortunatamente non possiamo crearne uno personalizzato solo <input>perché i CSS contentnon funzionano su quell'elemento.

Negli stati selezionati, utilizziamo le icone SVG incorporate in base64 da Open Iconic . Questo ci fornisce il miglior controllo per lo stile e il posizionamento su browser e dispositivi.

Caselle di controllo

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Le caselle di controllo personalizzate possono anche utilizzare la :indeterminatepseudo classe se impostate manualmente tramite JavaScript (non è disponibile alcun attributo HTML per specificarlo).

Se stai usando jQuery, qualcosa del genere dovrebbe essere sufficiente:

$('.your-checkbox').prop('indeterminate', true)

radio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

In linea

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Disabilitato

Le caselle di controllo e le radio personalizzate possono anche essere disabilitate. Aggiungi l' disabledattributo booleano a <input>e l'indicatore personalizzato e la descrizione dell'etichetta verranno automaticamente impostati.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Seleziona menu

I menu personalizzati <select>richiedono solo una classe personalizzata .custom-selectper attivare gli stili personalizzati.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Puoi anche scegliere tra selezioni personalizzate piccole e grandi per abbinare i nostri input di testo di dimensioni simili.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

L' multipleattributo è supportato anche:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Come è l' sizeattributo:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Browser di file

L'input del file è il più nodoso del gruppo e richiede JavaScript aggiuntivo se desideri collegarli con Scegli file funzionale... e il testo del nome del file selezionato.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Nascondiamo il file predefinito <input>tramite opacitye invece stiliamo il <label>. Il pulsante viene generato e posizionato con ::after. Infine, dichiariamo a widthe heightsulla <input>corretta spaziatura per i contenuti circostanti.

Tradurre o personalizzare le stringhe

La :lang()pseudo-classe viene utilizzata per consentire la traduzione del testo "Sfoglia" in altre lingue. Sovrascrivere o aggiungere voci alla $custom-file-textvariabile Sass con il tag di lingua pertinente e le stringhe localizzate. Le stringhe inglesi possono essere personalizzate allo stesso modo. Ad esempio, ecco come si potrebbe aggiungere una traduzione spagnola (il codice della lingua spagnola è es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Ecco lang(es)in azione l'input del file personalizzato per una traduzione spagnola:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Dovrai impostare correttamente la lingua del tuo documento (o del suo sottoalbero) per visualizzare il testo corretto. Questo può essere fatto usando l' langattributo sull'elemento <html>o l' Content-Languageintestazione HTTP , tra gli altri metodi.