Correction : Exercice 2 - Formulaire inscription

Objectif : manipuler différents champs de formulaire : texte, email, mot de passe, date, radio, checkbox et select.

Code corrigé

<form action=\"#\" method=\"post\">
  <fieldset>
    <legend>Inscription</legend>

    <label for=\"nom\">Nom</label>
    <input type=\"text\" id=\"nom\" name=\"nom\" required>

    <label for=\"email\">Email</label>
    <input type=\"email\" id=\"email\" name=\"email\" required>

    <label for=\"motdepasse\">Mot de passe</label>
    <input type=\"password\" id=\"motdepasse\" name=\"motdepasse\" required>

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

    <p>Genre</p>
    <label><input type=\"radio\" name=\"genre\" value=\"homme\"> Homme</label>
    <label><input type=\"radio\" name=\"genre\" value=\"femme\"> Femme</label>
    <label><input type=\"radio\" name=\"genre\" value=\"autre\"> Autre</label>

    <p>
      <label>
        <input type=\"checkbox\" name=\"conditions\" required>
        Accepter les conditions
      </label>
    </p>

    <label for=\"pays\">Pays</label>
    <select id=\"pays\" name=\"pays\">
      <option value=\"\">Choisir un pays</option>
      <option value=\"fr\">France</option>
      <option value=\"be\">Belgique</option>
      <option value=\"ch\">Suisse</option>
    </select>

    <button type=\"submit\">S'inscrire</button>
  </fieldset>
</form>

Aperçu

Points à retenir

• Les boutons radio partagent le même name.
• La case à cocher sert aux choix indépendants.
• select est adapté pour une liste de choix.