Éléments avancés de formulaire

En bref

1Textarea permet de créer des zones de texte multilignes pour les messages et commentaires
2Select et options créent des listes déroulantes pour organiser les choix multiples
3Radio buttons et checkboxes offrent des sélections uniques ou multiples avec une interface claire

Introduction

Après avoir maîtrisé les éléments de base comme les champs texte et les boutons, il est temps de découvrir les éléments avancés qui rendront vos formulaires plus interactifs et professionnels. Ces éléments permettent de collecter des informations plus complexes tout en améliorant l'expérience utilisateur.

Comprendre les types d'éléments avancés

Chargement du diagramme...

L'élément Textarea : zones de texte étendues

Structure et syntaxe

L'élément <textarea> permet de créer des zones de saisie multilignes, parfaites pour les messages, commentaires ou descriptions longues.

html
<!-- Textarea de base -->
<textarea name="message" id="message"></textarea>

<!-- Textarea avec attributs optimisés -->
<textarea 
    name="commentaire" 
    id="commentaire"
    rows="5" 
    cols="50"
    placeholder="Partagez votre expérience..."
    required>
</textarea>

<!-- Textarea avec contenu par défaut -->
<textarea name="description" id="description">
Contenu par défaut qui apparaît dans la zone
</textarea>

Attributs essentiels

Attribut	Description	Exemple
`rows`	Nombre de lignes visibles	`rows="4"`
`cols`	Nombre de colonnes visibles	`cols="50"`
`placeholder`	Texte d'aide	`placeholder="Votre message..."`
`maxlength`	Limite de caractères	`maxlength="500"`
`readonly`	Lecture seule	`readonly`

💡 À retenir : Utilisez rows et cols pour définir la taille, mais privilégiez le CSS pour un contrôle plus précis du design.

L'élément Select : listes déroulantes organisées

Syntaxe de base

html
<!-- Select simple -->
<select name="pays" id="pays">
    <option value="">-- Choisissez un pays --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
    <option value="ca">Canada</option>
</select>

<!-- Select avec option présélectionnée -->
<select name="service" id="service">
    <option value="web">Développement Web</option>
    <option value="mobile" selected>Applications Mobile</option>
    <option value="design">Design Graphique</option>
</select>

Groupement avec optgroup

html
<select name="region" id="region">
    <optgroup label="Europe">
        <option value="fr">France</option>
        <option value="de">Allemagne</option>
        <option value="it">Italie</option>
    </optgroup>
    <optgroup label="Amérique du Nord">
        <option value="us">États-Unis</option>
        <option value="ca">Canada</option>
    </optgroup>
</select>

🎯 En pratique : L'attribut selected permet de présélectionner une option, utile pour les valeurs par défaut ou les formulaires de modification.

Radio buttons : choix exclusifs

Principe et syntaxe

Les boutons radio permettent de faire un choix unique parmi plusieurs options. Tous les radio buttons d'un même groupe doivent avoir le même attribut name.

html
<!-- Groupe de radio buttons -->
<fieldset>
    <legend>Type de réservation :</legend>
    
    <input type="radio" id="dejeuner" name="repas" value="dejeuner">
    <label for="dejeuner">Déjeuner</label>
    
    <input type="radio" id="diner" name="repas" value="diner" checked>
    <label for="diner">Dîner</label>
    
    <input type="radio" id="brunch" name="repas" value="brunch">
    <label for="brunch">Brunch</label>
</fieldset>

<!-- Style amélioré avec div -->
<div class="radio-group">
    <p>Taille de t-shirt :</p>
    
    <div class="radio-item">
        <input type="radio" id="taille-s" name="taille" value="S">
        <label for="taille-s">Petite (S)</label>
    </div>
    
    <div class="radio-item">
        <input type="radio" id="taille-m" name="taille" value="M">
        <label for="taille-m">Moyenne (M)</label>
    </div>
    
    <div class="radio-item">
        <input type="radio" id="taille-l" name="taille" value="L">
        <label for="taille-l">Grande (L)</label>
    </div>
</div>

⚠️ Attention : Tous les radio buttons d'un même groupe DOIVENT avoir le même attribut name pour fonctionner correctement. Un seul choix sera possible par groupe.

Checkboxes : sélections multiples

Syntaxe et utilisation

Les cases à cocher permettent des sélections multiples indépendantes.

html
<!-- Checkboxes individuelles -->
<fieldset>
    <legend>Préférences alimentaires :</legend>
    
    <div class="checkbox-item">
        <input type="checkbox" id="vegetarien" name="preferences" value="vegetarien">
        <label for="vegetarien">Végétarien</label>
    </div>
    
    <div class="checkbox-item">
        <input type="checkbox" id="vegan" name="preferences" value="vegan">
        <label for="vegan">Vegan</label>
    </div>
    
    <div class="checkbox-item">
        <input type="checkbox" id="sans-gluten" name="preferences" value="sans-gluten" checked>
        <label for="sans-gluten">Sans gluten</label>
    </div>
</fieldset>

<!-- Checkbox unique pour acceptation -->
<div class="terms-checkbox">
    <input type="checkbox" id="cgu" name="accepte_cgu" value="oui" required>
    <label for="cgu">J'accepte les <a href="/cgu">conditions générales d'utilisation</a></label>
</div>

Le saviez-vous ?

Le premier formulaire web a été créé par Tim Berners-Lee en 1993, mais les éléments SELECT et TEXTAREA n'ont été standardisés qu'en 1995 avec HTML 2.0. Avant cela, seuls les champs texte simples existaient !

— Histoire du développement web W3C

Exemple complet : formulaire de contact restaurant

html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Formulaire de Contact - Restaurant</title>
    <style>
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .radio-item, .checkbox-item {
            margin-bottom: 10px;
        }
        
        .radio-item input, .checkbox-item input {
            width: auto;
            margin-right: 8px;
        }
        
        fieldset {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <form action="/contact" method="post">
        <h2>Réservation et Contact</h2>
        
        <!-- Champs de base -->
        <div class="form-group">
            <label for="nom">Nom complet :</label>
            <input type="text" id="nom" name="nom" required>
        </div>
        
        <div class="form-group">
            <label for="email">Email :</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <!-- Select pour le service -->
        <div class="form-group">
            <label for="service">Type de demande :</label>
            <select name="service" id="service" required>
                <option value="">-- Sélectionnez un service --</option>
                <option value="reservation">Réservation</option>
                <option value="evenement">Événement privé</option>
                <option value="traiteur">Service traiteur</option>
                <option value="autre">Autre demande</option>
            </select>
        </div>
        
        <!-- Radio buttons pour le type de repas -->
        <fieldset>
            <legend>Type de repas souhaité :</legend>
            
            <div class="radio-item">
                <input type="radio" id="dejeuner" name="repas" value="dejeuner">
                <label for="dejeuner">Déjeuner (12h-14h)</label>
            </div>
            
            <div class="radio-item">
                <input type="radio" id="diner" name="repas" value="diner">
                <label for="diner">Dîner (19h-22h)</label>
            </div>
            
            <div class="radio-item">
                <input type="radio" id="brunch" name="repas" value="brunch">
                <label for="brunch">Brunch weekend (10h-15h)</label>
            </div>
        </fieldset>
        
        <!-- Checkboxes pour les préférences -->
        <fieldset>
            <legend>Préférences alimentaires (optionnel) :</legend>
            
            <div class="checkbox-item">
                <input type="checkbox" id="vegetarien" name="preferences[]" value="vegetarien">
                <label for="vegetarien">Plats végétariens</label>
            </div>
            
            <div class="checkbox-item">
                <input type="checkbox" id="vegan" name="preferences[]" value="vegan">
                <label for="vegan">Plats vegans</label>
            </div>
            
            <div class="checkbox-item">
                <input type="checkbox" id="sans-gluten" name="preferences[]" value="sans-gluten">
                <label for="sans-gluten">Sans gluten</label>
            </div>
            
            <div class="checkbox-item">
                <input type="checkbox" id="enfant" name="preferences[]" value="enfant">
                <label for="enfant">Menu enfant</label>
            </div>
        </fieldset>
        
        <!-- Textarea pour le message -->
        <div class="form-group">
            <label for="message">Message ou demandes spéciales :</label>
            <textarea 
                name="message" 
                id="message"
                rows="5"
                placeholder="Décrivez votre demande, le nombre de personnes, la date souhaitée, ou toute information importante..."
                maxlength="1000">
            </textarea>
        </div>
        
        <!-- Checkbox obligatoire -->
        <div class="checkbox-item">
            <input type="checkbox" id="newsletter" name="newsletter" value="oui">
            <label for="newsletter">Je souhaite recevoir les actualités du restaurant</label>
        </div>
        
        <div class="checkbox-item">
            <input type="checkbox" id="cgu" name="accepte_cgu" value="oui" required>
            <label for="cgu">J'accepte les conditions d'utilisation *</label>
        </div>
        
        <button type="submit">Envoyer la demande</button>
    </form>
</body>
</html>

Points clés à retenir

💡 À retenir : L'attribut name est crucial pour le traitement des données : même nom pour les radio buttons d'un groupe, noms différents pour les checkboxes indépendantes.

⚠️ Attention : Toujours associer un <label> à chaque élément de formulaire avec l'attribut for correspondant à l'id de l'élément pour l'accessibilité.

🎯 En pratique : Utilisez <fieldset> et <legend> pour regrouper visuellement et sémantiquement les éléments liés, particulièrement pour les radio buttons et checkboxes.

Bonnes pratiques de conception

Tableau récapitulatif des cas d'usage

Élément	Cas d'usage	Avantages	Points d'attention
Textarea	Messages longs, commentaires, descriptions	Texte multiligne, redimensionnable	Limiter la taille (maxlength)
Select	Listes longues, pays, catégories	Économise l'espace, organisé	Option vide par défaut
Radio	Choix unique obligatoire (taille, genre)	Toutes options visibles	Même attribut name
Checkbox	Sélections multiples, acceptations	Flexibilité, indépendance	Noms distincts