Formulaires Mobile-First

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 10 sur 35.

Les formulaires sont l’un des éléments les plus importants du Web : les utilisateurs y saisissent du texte, appuient dessus et interagissent constamment avec eux. Lors de la conception de formulaires en privilégiant d’abord les appareils mobiles, nous nous concentrons sur la facilité d’utilisation sur les petits écrans :

Rendez les champs de saisie et les boutons plus grands afin que les utilisateurs puissent facilement saisir du texte et appuyer dessus.
Empilez les champs verticalement et utilisez des champs de saisie pleine largeur.
Ajoutez du rembourrage et de l’espacement pour les doigts.

Exemple pour mobile :

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

Ensuite, pour les écrans plus grands (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;  /* center and limit width */
    margin: 0 auto;
  }

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

Défi

Facile

On vous donne un formulaire HTML de base. Votre tâche consiste à définir des styles conçus d’abord pour les appareils mobiles :

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

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>