Sådan oprettes: Inline formular

Forrige side Pop opp skjema
Neste side Fjern innhold fra inputboksen

Lær at oprette responsiv inline formular ved hjælp af CSS.

Responsiv inline formular

Juster browser vinduesstørrelsen for at se effekten (etiketter og input vil overlappe, ikke stå parallelt på mindre skærme):

Prøv selv

Sådan oprettes en inline formular

Første trin - Tilføj HTML:

Brug <form>-elementet til at håndtere input. Læs mere om det i vores PHP-tutorial.

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Indtast email" name="email">
  <label for="pwd">Kodeord:</label>
  <input type="password" id="pwd" placeholder="Indtast kodeord" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Husk mig
  </label>
  <button type="submit">Submit</button>
</form>

Andet trin - Tilføj CSS:

/* Angiv stil for formularen - vis elementer vandret */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Tilføj lidt margin til hver etiket */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Angiv stil for inputfelt */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Angiv stil for submit-knappen */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Tilføj responsivitet - vis formularkontroller lodret i stedet for vandret på skærme med bredde mindre end 800 pixels */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Prøv selv