Chapitre 595 | Inputs de formulaire avancés

Les champs à choix : radio, checkbox et select

Au chapitre 590, vous avez construit un formulaire simple avec des champs texte, email, mot de passe et un message. Mais un formulaire propose souvent aussi des choix à l’utilisateur : une seule option parmi plusieurs, plusieurs options possibles, ou un choix dans une liste déroulante.

Ce chapitre couvre trois nouveaux types de champs, plus un attribut essentiel pour la validation de base.

1. Les boutons radio (input type="radio")

Un bouton radio permet de choisir une seule option parmi plusieurs. Pour que les boutons soient liés entre eux (un seul sélectionnable à la fois), ils doivent tous partager le même attribut name.

<fieldset>
  <legend>Civilité</legend>

  <input type="radio" id="madame" name="civilite" value="madame">
  <label for="madame">Madame</label>

  <input type="radio" id="monsieur" name="civilite" value="monsieur">
  <label for="monsieur">Monsieur</label>
</fieldset>

Explication :

• name="civilite" : identique sur les deux boutons, c’est ce qui les regroupe et empêche de cocher les deux en même temps.
• value : la valeur envoyée si ce bouton est sélectionné.
• id et for : permettent de cliquer sur le texte du label pour cocher le bouton associé (pratique, surtout sur mobile).
• <fieldset> et <legend> : balises sémantiques qui regroupent visuellement un ensemble de champs liés, avec un titre de groupe.

2. Les cases à cocher (input type="checkbox")

Contrairement au bouton radio, une case à cocher permet plusieurs choix indépendants. Chaque case peut être cochée ou décochée sans influencer les autres.

<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Je souhaite recevoir la newsletter</label>

<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte les conditions générales</label>

Vous remarquez que la deuxième case utilise required : nous y revenons juste après.

3. Le menu déroulant (select et option)

Quand il y a beaucoup d’options à proposer, un menu déroulant est plus compact qu’une liste de boutons radio. On utilise la balise <select>, qui contient plusieurs balises <option>.

<label for="pays">Pays :</label>
<select id="pays" name="pays">
  <option value="">-- Choisissez --</option>
  <option value="fr">France</option>
  <option value="be">Belgique</option>
  <option value="ch">Suisse</option>
</select>

Explication :

• Chaque <option> a une value (ce qui est envoyé) et un texte visible (ce que l’utilisateur lit).
• La première option avec value="" sert de choix « vide » par défaut, pour éviter qu’un pays soit pré-sélectionné par erreur.

4. L’attribut required

L’attribut required indique au navigateur qu’un champ doit obligatoirement être rempli avant l’envoi du formulaire. C’est une validation native, gérée directement par le navigateur, sans JavaScript.

<input type="email" name="email" required>

Si l’utilisateur tente d’envoyer le formulaire sans remplir ce champ, le navigateur affiche automatiquement un message d’erreur et bloque l’envoi. Aucun code CSS ou JavaScript n’est nécessaire pour ce comportement de base.

Note : required est un attribut booléen. Il n’a pas besoin de valeur (required suffit, pas besoin d’écrire required="required" ou required="true").

Exercice

Reprenez le formulaire du chapitre 590 et ajoutez :

1. Un groupe de boutons radio pour la civilité (Madame / Monsieur).
2. Une case à cocher pour l’acceptation des conditions générales, avec l’attribut required.
3. Un menu déroulant pour choisir un pays parmi trois ou quatre options.
4. Rendez le champ email required lui aussi.

Testez l’envoi du formulaire sans remplir les champs obligatoires : observez le message d’erreur natif du navigateur.

Important : comme au chapitre 590, ce formulaire reste un exercice de mise en forme. Il n’y a toujours aucune logique côté serveur pour traiter réellement les données envoyées.

Corrigé

⚠️ NE REGARDEZ PAS LA SOLUTION AVANT D’AVOIR ESSAYÉ !

Bloqué ? Cliquez sur le bouton ci-dessous pour afficher le résultat attendu, en reprenant le formulaire du chapitre 590 et en y ajoutant les nouveaux champs.

<div class="form-container">
  <h2>Formulaire</h2>
  <form>
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" placeholder="Votre nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" placeholder="Votre email" required>

    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" placeholder="Votre mot de passe">

    <fieldset>
      <legend>Civilité</legend>
      <input type="radio" id="madame" name="civilite" value="madame">
      <label for="madame">Madame</label>

      <input type="radio" id="monsieur" name="civilite" value="monsieur">
      <label for="monsieur">Monsieur</label>
    </fieldset>

    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
      <option value="">-- Choisissez --</option>
      <option value="fr">France</option>
      <option value="be">Belgique</option>
      <option value="ch">Suisse</option>
    </select>

    <label for="message">Message :</label>
    <textarea id="message" name="message" placeholder="Votre message"></textarea>

    <div class="checkbox-group">
      <input type="checkbox" id="newsletter" name="newsletter">
      <label for="newsletter">Je souhaite recevoir la newsletter</label>
    </div>

    <div class="checkbox-group">
      <input type="checkbox" id="cgu" name="cgu" required>
      <label for="cgu">J'accepte les conditions générales</label>
    </div>

    <button type="submit">Envoyer</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

.form-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

label {
  font-size: 0.9rem;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0;
}

textarea {
  resize: none;
  height: 80px;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

legend {
  font-weight: bold;
  padding: 0 5px;
}

fieldset label {
  font-weight: normal;
  margin-right: 15px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group input {
  width: auto;
}

button {
  padding: 10px;
  font-size: 1rem;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}