Gli ultimi tutorial di sviluppo web
 

Bootstrap Forms

❮ Precedente Successivo Capitolo ❯

Bootstrap's impostazioni predefinite

I controlli dei moduli ricevono automaticamente un certo stile globale con Bootstrap :

Tutti testuale <input> , <textarea> , e <select> elementi con classe .form-control hanno una larghezza di 100%.

Bootstrap modulo layout

Bootstrap fornisce tre tipi di layout di forma:

  • forma verticale (questa è l'impostazione predefinita)
  • forma orizzontale
  • modulo in linea

Disposizioni di riferimento per tutti i tre layout di forma:

  • Utilizzare sempre <form role="form"> (aiuta a migliorare l'accessibilità per le persone che utilizzano screen reader)
  • Avvolgere etichette e controlli dei moduli in <div class="form-group"> (necessario per la spaziatura ottimale)
  • Aggiungi classe .form-control a tutti testuale <input> , <textarea> , e <select> elementi

Bootstrap Modulo verticale (default)

L'esempio seguente crea una forma verticale con due campi di input, una casella di controllo, e di un pulsante di invio:

Esempio

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Prova tu stesso "

Bootstrap Inline Modulo

In una forma in linea, tutti gli elementi sono in linea, allineato a sinistra, e le etichette sono a fianco.

Nota: questo vale solo per le forme all'interno di viewports che sono almeno 768px di larghezza!

regola aggiuntiva per una forma in linea:

  • Aggiungi classe .form-inline per il <form> elemento

L'esempio seguente crea una forma in linea con due campi di input, una casella di controllo, ed un pulsante di invio:

Esempio

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Prova tu stesso "

Suggerimento: se non si include un'etichetta per ogni ingresso, i lettori di schermo avranno problemi con i moduli. È possibile nascondere le etichette per tutti i dispositivi, tranne i lettori di schermo, utilizzando il .sr-only classe:

Esempio

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Prova tu stesso "

Bootstrap Horizontal Form

Una forma orizzontale si distingue dalle altre forme sia nella quantità di marcatura, e nella presentazione della forma.

regole aggiuntive per una forma orizzontale:

  • Aggiungi classe .form-horizontal per il <form> elemento
  • Aggiungere class .control-label a tutti i <label> elementi

Suggerimento: Usa Bootstrap's classi predefinite griglia per allineare le etichette e gruppi di controlli dei moduli in un layout orizzontale.

L'esempio seguente crea una forma orizzontale con due campi di input, una casella di controllo, ed un pulsante di invio:

Esempio

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Prova tu stesso "

❮ Precedente Successivo Capitolo ❯