Hur man skapar: inline-formulär

Föregående sida Pop-up-formulär
Nästa sida Rensa inmatningsrutan

Lär dig hur man skapar responsiva inline-formulär med CSS.

Responsivt inline-formulär

Justera webbläsarens fönsterstorlek för att se effekten (etiketter och inmatningsfält kommer att staplas, inte visas bredvid varandra på mindre skärmar):

Prova själv

Hur man skapar en inline-formulär

Steg 1 - Lägg till HTML:

Använd <form>-elementet för att hantera inmatning. Lär dig mer om detta i vår PHP-utbildning.

<form class="form-inline" action="/action_page.php">
  <label for="email">E-post:</label>
  <input type="email" id="email" placeholder="Ange e-post" name="email">
  <label for="pwd">Lösenord:</label>
  <input type="password" id="pwd" placeholder="Ange lösenord" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Kom ihåg mig
  </label>
  <button type="submit">Submit</button>
</form>

Steg 2 - Lägg till CSS:

/* Ställ in stil för formulär - visa element horisontellt */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Lägg till lite marginal till varje etikett */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Ställ in stil för inmatningsfält */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Ställ in stil för submit-knappen */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Lägg till responsivitet - visa formulärkontroller vertikalt istället för horisontellt på skärmar med en bredd mindre än 800 pixlar */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Prova själv