Hoe te maken: gestapeld formulier

Vorige pagina Nieuwsabonnement
Volgende pagina Responsieve formulieren

Leer hoe je een gestapeld formulier maakt met CSS.

Gestapeld formulier

Een verticaal gestapeld formulier (waarbij invoervelden en labels boven elkaar worden geplaatst in plaats van horizontaal)

Probeer het zelf

Hoe een gestapeld formulier te maken

Stap 1 - Voeg HTML toe:

Gebruik het <form>-element om invoer te verwerken. U kunt dat doen in onze PHP-tutorial Meer informatie te vinden.]}

Voeg invoercontroleurs toe aan elk veld (en matchende labels):

<form action="/action_page.php">
  <label for="fname">Voornaam</label>
  <input type="text" id="fname" name="firstname" placeholder="Uw naam..">
  <label for="lname">Achternaam</label>
  <input type="text" id="lname" name="lastname" placeholder="Uw achternaam..">
  <label for="country">Land</label>
  <select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
  </select>
  <input type="submit" value="Submit">
</form>

Tweede stap - Voeg CSS toe:

/* Stel stijl van invoervelden in */
  input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
/* Stel stijl van submit-knop in */
input[type=submit] {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Voeg achtergrondkleur toe aan de submit-knop bij hover */
input[type=submit]:hover {
  background-color: #45a049;
}

Probeer het zelf