Comment créer : Formulaire responsive

Page précédente Formulaire empilé
Page suivante Formulaire pop-up

Apprenez à créer des formulaires responsives en utilisant CSS.

Formulaire responsive

Ajustez la taille de la fenêtre du navigateur pour voir l'effet (sur les écrans plus petits, les étiquettes et les champs d'entrée s'empilent plutôt que de s'afficher côte à côte) :

Essayez-le vous-même

Comment créer un formulaire responsive

Étape 1 - Ajoutez du HTML :

Utilisez l'élément <form> pour traiter les entrées. Vous pouvez en savoir plus sur nos tutoriels PHP.

Ajoutez des champs d'entrée (avec des étiquettes correspondantes) et utilisez des éléments <div> pour envelopper chaque étiquette et champ d'entrée, afin de définir la largeur spécifiée avec CSS :

<div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">Prénom</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Votre nom..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Nom de famille</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Votre nom de famille..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Pays</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australie</option>
          <option value="canada">Canada</option>
          <option value="usa">États-Unis</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Sujet</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Écrivez quelque chose.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Soumettre">
    </div>
  </form>
</div>

Deuxième étape - Ajouter CSS :

/* Définir les styles des zones de saisie, des éléments de sélection et des zones de texte */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
/* Définir les styles de l'étiquette pour qu'elle s'affiche à côté de la zone de saisie */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* Définir les styles du bouton de soumission */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
/* Définir les styles du conteneur */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* Colonne flottante de libellé : largeur de 25% */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
/* Colonne flottante d'entrée : largeur de 75% */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* Nettoyez le flot après les colonnes */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Réponse aux médias - Lorsque la largeur de l'écran est inférieure à 600px, empilez deux colonnes au lieu de les aligner côte à côte */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Essayez-le vous-même