Les contrôles de formulaire avancés

Au-delà des champs de texte de base, HTML5 offre une riche palette de contrôles pour créer des formulaires plus interactifs et mieux structurés.

Les zones de texte multi-lignes (<textarea>)

Lorsque vous avez besoin de collecter un texte long, comme un message ou un commentaire, la balise <textarea> est plus appropriée qu’un <input type="text">.

• rows : Définit la hauteur visible du champ, en nombre de lignes de texte.
• cols : Définit la largeur visible du champ, en nombre de caractères.

<label for="message">Votre message :</label>
<textarea id="message" name="user_message" rows="8" cols="50" required></textarea>

Les listes de sélection (<select>)

La balise <select> crée une liste déroulante. Chaque option de la liste est définie par une balise <option>.

• L’attribut value de l’<option> contient la donnée qui sera envoyée au serveur.
• Le texte entre <option> et </option> est ce que l’utilisateur voit dans la liste.
• L’attribut selected peut être ajouté à une <option> pour la présélectionner.

<label for="pays">Choisissez un pays :</label>
<select id="pays" name="user_country">
    <option value="">--Veuillez choisir une option--</option>
    <option value="fr">France</option>
    <option value="be" selected>Belgique</option>
    <option value="ch">Suisse</option>
</select>

Les cases à cocher (<input type="checkbox">)

Les cases à cocher permettent à l’utilisateur de sélectionner zéro, une ou plusieurs options dans une liste. Chaque case est un <input type="checkbox"> indépendant.

Pour que le serveur puisse recevoir plusieurs valeurs, il est courant de nommer les champs avec des crochets [] (par exemple, name="interets[]"), bien que cela dépende du langage côté serveur.

<p>Quels sont vos centres d'intérêt ?</p>
<input type="checkbox" id="musique" name="interet_musique" value="musique">
<label for="musique">Musique</label><br>
<input type="checkbox" id="sport" name="interet_sport" value="sport">
<label for="sport">Sport</label><br>
<input type="checkbox" id="lecture" name="interet_lecture" value="lecture">
<label for="lecture">Lecture</label>

Les boutons radio (<input type="radio">)

Les boutons radio sont utilisés pour permettre à l’utilisateur de ne choisir qu’une seule option parmi plusieurs. Pour qu’ils fonctionnent comme un groupe unique, tous les <input type="radio"> du groupe doivent avoir le même attribut name.

<p>Quel est votre niveau ?</p>
<input type="radio" id="debutant" name="niveau" value="debutant" required>
<label for="debutant">Débutant</label><br>
<input type="radio" id="intermediaire" name="niveau" value="intermediaire">
<label for="intermediaire">Intermédiaire</label><br>
<input type="radio" id="avance" name="niveau" value="avance">
<label for="avance">Avancé</label>

Grouper les champs (<fieldset> et <legend>)

Pour améliorer la sémantique et l’accessibilité, il est recommandé de regrouper les ensembles de contrôles liés (comme une série de boutons radio ou de cases à cocher) à l’aide d’un <fieldset>. La balise <legend> fournit un titre pour ce groupe.

<fieldset>
    <legend>Quel est votre niveau ?</legend>

    <input type="radio" id="debutant" name="niveau" value="debutant" required>
    <label for="debutant">Débutant</label><br>

    <input type="radio" id="intermediaire" name="niveau" value="intermediaire">
    <label for="intermediaire">Intermédiaire</label><br>

    <input type="radio" id="avance" name="niveau" value="avance">
    <label for="avance">Avancé</label>
</fieldset>

Autres types d’<input> utiles

HTML5 a introduit de nombreux type pour la balise <input> afin de couvrir des cas d’usage courants, offrant souvent une interface utilisateur améliorée (comme un calendrier) et une validation intégrée.

• type="number" : Pour les nombres (affiche des flèches pour incrémenter/décrémenter).
• type="date" : Pour sélectionner une date (affiche un calendrier).
• type="range" : Pour sélectionner une valeur dans une plage (affiche un curseur).
• type="file" : Pour permettre à l’utilisateur de sélectionner un fichier à envoyer.

<p>
    <label for="quantite">Quantité (entre 1 et 5) :</label>
    <input type="number" id="quantite" name="quantite" min="1" max="5">
</p>
<p>
    <label for="rdv">Date de rendez-vous :</label>
    <input type="date" id="rdv" name="date_rdv">
</p>
<p>
    <label for="cv">Votre CV :</label>
    <input type="file" id="cv" name="cv_user">
</p>