Responsive Design & Formulaires

Objectif de la semaine : construire des formulaires et du responsive fiable.

Méthode recommandée : valide d'abord le formulaire, puis adapte la mise en page avec media queries. Avancez par petites étapes et testez chaque changement immédiatement.

Un site responsive s'adapte à tous les écrans (mobile, tablette, bureau). Les media queries appliquent des styles selon la taille de la fenêtre.

/* ===== APPROCHE MOBILE FIRST =====
   On commence par les petits écrans,
   puis on ajoute des styles pour les plus grands. */

/* Base — petits écrans (mobile) */
.grille {
  display: grid;
  grid-template-columns: 1fr;  /* 1 colonne */
  gap: 1rem;
}

/* Tablette — écrans ≥ 600 px */
@media (min-width: 600px) {
  .grille {
    grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
  }
}

/* Bureau — écrans ≥ 1024 px */
@media (min-width: 1024px) {
  .grille {
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes */
  }
}

/* Autres conditions possibles */
@media (max-width: 599px) { /* uniquement mobile */ }
@media (orientation: landscape) { /* paysage */ }
@media (prefers-color-scheme: dark) { /* mode sombre */ }
@media print { /* lors de l'impression */ }

Points de rupture des écrans (breakpoints)

W3Schools Spaces permet d'héberger un site web statique (HTML/CSS/JS) gratuitement en quelques clics.

• Aller sur w3schools.com → menu Spaces
• Créer un compte (gratuit)
• Créer un nouveau Space → choisir un nom unique
• Uploader les fichiers HTML, CSS, images via l'interface ou l'éditeur en ligne
• Le site est accessible à l'URL : https://monespace.w3spaces.com

Un formulaire permet à l'utilisateur de saisir et d'envoyer des données.

<form action="https://www.w3schools.com/action_page.php" method="get" target="_blank">
  <!-- champs ici -->
  <button type="submit">Envoyer</button>
</form>

<!-- Toujours associer un <label> à chaque champ via for/id -->
<label for="nom">Nom</label>
<input type="text"     id="nom"      name="nom">

<label for="age">Âge</label>
<input type="number"   id="age"      name="age" min="0" max="120">

<label for="mdp">Mot de passe</label>
<input type="password" id="mdp"      name="mdp">

<label for="naissance">Date de naissance</label>
<input type="date"     id="naissance" name="naissance">

<label for="courriel">Courriel</label>
<input type="email"    id="courriel" name="courriel">

<label for="tel">Téléphone</label>
<input type="tel"      id="tel"      name="tel">

<!-- Boutons radio (name identique = même groupe) -->
<input type="radio" id="html" name="langage" value="html">
<label for="html">HTML</label>
<input type="radio" id="css" name="langage" value="css">
<label for="css">CSS</label>

<!-- Cases à cocher (indépendantes) -->
<input type="checkbox" id="newsletter" name="newsletter" value="oui">
<label for="newsletter">S'abonner à l'infolettre</label>

<!-- Bouton de soumission -->
<input type="submit" value="Envoyer">
<!-- ou -->
<button type="submit">Envoyer</button>

<!-- Liste déroulante -->
<label for="session">Session</label>
<select id="session" name="session">
  <option value="">-- Choisir --</option>
  <option value="h2026">Hiver 2026</option>
  <option value="e2026" selected>Été 2026</option>
  <option value="a2026">Automne 2026</option>
</select>

<!-- Sélection multiple (Ctrl+clic) -->
<select name="cours" multiple size="4">
  <option value="web1">Web 1</option>
  <option value="web2">Web 2</option>
</select>

<!-- Zone de texte multi-lignes -->
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"
          placeholder="Écrivez votre message ici…"></textarea>

<!-- Boutons -->
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
<button type="button">Action JavaScript</button>

<!-- Fieldset & Legend : regrouper des champs liés -->
<fieldset>
  <legend>Informations personnelles</legend>

  <label for="prenom">Prénom</label>
  <input type="text" id="prenom" name="prenom">

  <label for="courriel2">Courriel</label>
  <input type="email" id="courriel2" name="courriel">
</fieldset>

<fieldset>
  <legend>Préférences</legend>
  <input type="checkbox" id="promo" name="promo">
  <label for="promo">Recevoir les promotions</label>
</fieldset>

<input
  type="text"
  name="nom"              <!-- nom du champ (envoyé au serveur) -->
  value="Valeur initiale" <!-- valeur par défaut -->
  placeholder="Exemple"  <!-- texte gris indicatif -->
  autofocus               <!-- focus automatique au chargement -->
  required                <!-- champ obligatoire -->
  readonly                <!-- visible mais non modifiable -->
  disabled                <!-- désactivé, non envoyé -->
  maxlength="50"          <!-- nombre max de caractères -->
/>

<input type="number"
  min="0"    <!-- valeur minimale -->
  max="100"  <!-- valeur maximale -->
  step="5"   <!-- incrément (0, 5, 10, 15…) -->
/>

<input type="text"
  pattern="[A-Za-z]{3,}" <!-- expression régulière de validation -->
  title="3 lettres minimum"
/>

CSS peut cibler des éléments selon leurs attributs HTML, pas seulement leurs classes ou ids.

/* Élément qui POSSÈDE l'attribut */
input[required] { border-color: red; }
input[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Attribut avec valeur EXACTE */
input[type="email"]    { background: url(email-icon.svg) no-repeat; }
input[type="password"] { letter-spacing: .2em; }
input[type="submit"]   { background: #264de4; color: white; }

/* Attribut dont la valeur CONTIENT le mot */
[class~="btn"] { cursor: pointer; }

/* Attribut dont la valeur COMMENCE PAR */
a[href^="https"] { color: green; }   /* liens sécurisés */
a[href^="http"]  { color: orange; }  /* liens non-sécurisés */
a[href^="#"]     { color: navy; }    /* ancres internes */

/* Attribut dont la valeur SE TERMINE PAR */
a[href$=".pdf"]  { padding-right: 20px; } /* liens PDF */
img[src$=".svg"] { width: 24px; }         /* images SVG */

/* Attribut dont la valeur CONTIENT (n'importe où) */
[class*="icon"] { display: inline-block; }

/* Combinaisons */
input[type="text"][required] {
  border-left: 3px solid red;
}

Montez un formulaire complet et adaptez-le pour mobile.

1. Créez un formulaire avec label, input variés, select, textarea et bouton submit.
2. Ajoutez au moins une media query pour optimiser l’affichage petit écran.
3. Testez les champs required et vérifiez l’ergonomie du formulaire.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.