Come creare: modulo inline

Impara come creare moduli inline responsive utilizzando CSS.

Modulo inline responsive

Ajusta la dimensione della finestra del browser per vedere l'effetto (etichette e input si sovrapporranno, invece di essere accostati sugli schermi più piccoli):

Prova personalmente

Come creare un modulo inline

Primo passo - Aggiungi HTML:

Usa l'elemento <form> per gestire l'input. Puoi trovare ulteriori informazioni nel nostro tutorial PHP.

<form class="form-inline" action="/azione_pagina.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Inserisci email" name="email">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" placeholder="Inserisci password" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Ricorda di me
  </label>
  <button type="submit">Invia</button>
</form>

Secondo passo - Aggiungi CSS:

/* Imposta lo stile del modulo - Visualizza gli elementi in orizzontale */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Aggiungi alcune margini esterne a ciascun etichetta */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Imposta lo stile del campo di input */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Imposta lo stile del pulsante di invio */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Aggiungi capacità di risposta - Visualizza i controlli del modulo verticalmente invece che orizzontalmente sugli schermi con larghezza inferiore a 800 pixel */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Prova personalmente

Pagine correlate

Tutorial:Formulario HTML

Tutorial:Formulario CSS