Formulaires Mobile-First

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

Les Forms sont l’une des parties les plus importantes du Web : les utilisateurs saisissent du texte, appuient et interagissent constamment avec elles. Lors de la conception de Forms selon une approche mobile first, nous nous concentrons sur la facilité d’utilisation sur les petits écrans :

Rendez les inputs et les button plus grands afin que les utilisateurs puissent facilement saisir du texte et appuyer.
Empilez les fields vertically et utilisez des inputs full-width.
Ajoutez du padding et de l’espace pour les doigts.

Exemple pour mobile :

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

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

Center le formulaire sur la page.
Placez certains champs côte à côte au lieu de les empiler.
Ajustez 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>