Formulaires Mobile-First

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 10 sur 35.

Les formulaires sont l'une des parties les plus importantes du web — les utilisateurs saisissent, tapotent et interagissent avec eux en permanence. Lors de la conception de formulaires en mode mobile first, nous nous concentrons sur l'ergonomie sur les petits écrans :

Rendez les champs de saisie et les boutons plus grands pour que les utilisateurs puissent facilement taper et appuyer.
Empilez les champs verticalement et utilisez des champs de saisie pleine largeur.
Ajoutez de la marge intérieure (padding) et de l'espacement pour les doigts.

Exemple pour mobile :

input, button {
  width: 100%;       /* pleine largeur pour les petits écrans */
  padding: 0.75rem;  /* plus facile à toucher */
  font-size: 1rem;   /* texte lisible */
}

Ensuite, pour les écrans plus larges (tablette ou ordinateur de bureau), nous améliorons la mise en page :

Centrer le formulaire sur la page.
Placer certains champs côte à côte au lieu de les empiler.
Ajuster les largeurs et l'espacement pour une meilleure apparence.

Exemple pour les écrans plus grands :

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centrer et limiter la largeur */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* entrées côte à côte */
  }
}

Défi

Facile

On vous donne un formulaire HTML de base. Votre tâche est de définir des styles mobile-first :

Les éléments à l'intérieur du formulaire doivent être empilés verticalement. Utilisez display: flex et flex-direction: column, et ajoutez un peu de gap pour que l'ensemble soit esthétique.
Appliquez width: 100% et ajoutez du padding aux éléments input, button, et textarea afin qu'ils soient assez grands pour les écrans mobiles et faciles à toucher pour les utilisateurs.

Aide-mémoire

Lors de la conception de formulaires en "mobile-first", concentrez-vous sur l'ergonomie sur les petits écrans :

Rendez les champs de saisie et les boutons plus grands pour que les utilisateurs puissent facilement taper et cliquer
Empilez les champs verticalement et utilisez des entrées en pleine largeur
Ajoutez du remplissage (padding) et de l'espacement pour les doigts

Styles de formulaire mobile-first :

input, button {
  width: 100%;       /* pleine largeur pour les petits écrans */
  padding: 0.75rem;  /* plus facile à cliquer */
  font-size: 1rem;   /* texte lisible */
}

Pour les écrans plus grands (tablettes ou ordinateurs), améliorez la mise en page :

Centrez le formulaire sur la page
Placez certains champs côte à côte au lieu de les empiler
Ajustez les largeurs et l'espacement pour un meilleur rendu visuel

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* centrer et limiter la largeur */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* entrées côte à côte */
  }
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>