Bootstrap 5 Modulo

Modulo sovrapposto

Tutti gli elementi <input> e <textarea> con la classe .form-control possono ottenere lo stile di modulo corretto:

Esempio

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Inserisci l'indirizzo email" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Inserisci la password" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Ricorda me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Invia</button>
</form>

Prova direttamente

Inoltre, ti preghiamo di notare che per ogni elemento label abbiamo aggiunto .form-label classi per garantire il riempimento corretto.

Le caselle di controllo hanno diverse etichette. Sono state impostate .form-check elementi contenitori della classe. .form-check-label La classe, mentre le caselle di controllo e i pulsanti radio vengono racchiuse .form-check-input.

Textarea

Esempio

<label for="comment">Commento:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Prova direttamente

riga del modulo / griglia (modulo in linea)

Se desideri visualizzare gli elementi del modulo in modo orizzontale, usa .row e .col:

Esempio

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Inserisci l'indirizzo email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Inserisci la password" name="pswd">
    </div>
  </div>
</form>

Prova direttamente

Vuoi sapere se... Griglia Bootstrap Più informazioni sulle colonne e sulle righe sono state apprese nella sezione.

Dimensioni dei controlli del modulo

Puoi utilizzare .form-control-lg o .form-control-sm Modifica .form-control Dimensione dei controlli di input:

Esempio

<input type="text" class="form-control form-control-lg" placeholder="Controllo di input grande">
<input type="text" class="form-control" placeholder="Controllo di input standard">
<input type="text" class="form-control form-control-sm" placeholder="Controllo di input piccolo">

Prova direttamente

Disabilitato e readonly

Utilizzare le proprietà disabled e/or readonly per disabilitare i campi di input:

Esempio

<input type="text" class="form-control" placeholder="Controllo di input standard">
<input type="text" class="form-control" placeholder="Controllo di input disabilitato" disabled>
<input type="text" class="form-control" placeholder="Controllo di input readonly" readonly>

Prova direttamente

Input di testo puro

Utilizzare .form-control-plaintext Utilizzare la classe per impostare lo stile dei campi di input senza bordi, ma mantenere le margini esterne e interne appropriate:

Esempio

<input type="text" class="form-control-plaintext" placeholder="Input di testo puro">
<input type="text" class="form-control" placeholder="Controllo di input standard">

Prova direttamente

Scegliere colore

Per impostare correttamente lo stile di input con type="color", utilizzare .form-control-color Classe:

Esempio

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Prova direttamente