Comment créer : Formulaire en ligne

Apprenez à créer des formulaires en ligne réactifs en utilisant CSS.

Comment créer un formulaire en ligne

Première étape - Ajoutez HTML :

Utilisez l'élément <form> pour traiter les entrées. Vous pouvez en savoir plus sur les informations connexes dans notre tutoriel PHP.

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Entrez l'email" name="email">
  <label for="pwd">Mot de passe:</label>
  <input type="password" id="pwd" placeholder="Entrez le mot de passe" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Se souvenir de moi
  </label>
  <button type="submit">Soumettre</button>
</form>

Deuxième étape - Ajoutez CSS :

/* Définissez le style du formulaire - affichez les éléments en mode horizontal */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Ajoutez de la marge extérieure à chaque étiquette */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Définissez le style des champs d'entrée */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Définissez le style du bouton de soumission */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Ajoutez la capacité de réponse - affichez les contrôles du formulaire verticalement plutôt que horizontalement sur les écrans de largeur inférieure à 800 pixels */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Essayer par vous-même

Pages associées

Tutoriel :Formulaire HTML

Tutoriel :Formulaire CSS