Sådan oprettes: Stakformet formular

Forrige side Nyhedsabonnement
Næste side Responsiv formular

Lær hvordan du bruger CSS til at oprette stakformede formulær.

Stakformet formular

En lodret stakformet formular (hvor inputfelter og etiketter er placeret lodret, i stedet for vandret):

Prøv det selv

Sådan opretter du en stakformet formular

Første trin - Tilføj HTML:

Brug <form>-elementet til at håndtere input. Du kan finde vores PHP vejledning for flere oplysninger.

Tilføj input-kontroller til hver felt (med tilhørende etiketter):

<form action="/action_page.php">
  <label for="fname">Fornavn</label>
  <input type="text" id="fname" name="firstname" placeholder="Dit navn...">
  <label for="lname">Efternavn</label>
  <input type="text" id="lname" name="lastname" placeholder="Dit efternavn...">
  <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>

2. Tilføj CSS:

/* Indstil stil for input-felter */
  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;
}
/* Indstil stil for submit-knappen */
input[type=submit] {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Tilføj baggrundsfarve til submit-knappen ved museoverførsel */
input[type=submit]:hover {
  background-color: #45a049;
}

Prøv det selv