Éléments de formulaire HTML
Les attributs de formulaire ont affiné la balise form. Les éléments de formulaire sont les pièces à l’intérieur — libellés, zones de texte, listes, boutons, regroupement. Cette leçon cartographie la boîte à outils. Les types d’input suivent.
Pourquoi les éléments comptent
Un form nu avec seulement des attributs ne collecte pas de réponses. Il faut des contrôles. Choisir textarea plutôt qu’un input d’une ligne ou select plutôt qu’un texte libre change l’usage et les données.
Réponse directe
1) Associez chaque contrôle visible à un label. 2) input pour beaucoup de champs d’une ligne. 3) textarea multiligne. 4) select+option liste fixe. 5) button pour les actions. 6) fieldset+legend pour regrouper. action/method sur le form extérieur.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
fieldset profil avec contrôles mixtes
Petit éditeur de profil : un groupe, bio multiligne, niveau en liste, bouton enregistrer.
Profile fieldset with controls
html<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>Lire la démo profil
- fieldset+legend nomment le groupe
- textarea convient mieux à la bio
- select/option limitent le niveau
- chaque contrôle a id et name
- submit envoie le formulaire
- action/method de la leçon précédente
Préférences : radios et types de bouton
Parfois la réponse est exclusive. Les radios partagent name. Gardez un label sur chaque option. Comparez submit, reset et button.
Preferences radios and buttons
html<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>Lire la démo préférences
- radios du même name = un groupe
- radio dans label rend le texte cliquable
- legend titre Theme
- submit envoie ; reset efface — ne sauvegarde pas
- autres types d’input plus tard
Choisir le bon contrôle
- réponse courte/e-mail/mot de passe : input
- texte long : textarea
- liste fixe : select ou radios
- regrouper une section : fieldset+legend
- nommer : label
- envoyer : button type=submit
Pratique — assembler les éléments
- Copiez le profil ; changez legend et ajoutez option
- Remplacez temporairement textarea par input
- Second fieldset pour notes
- Radios de thème ; cliquez les labels
- Clear puis Save
- Déplacez un contrôle hors du form
- Phrase : les éléments sont des contrôles étiquetés à l’intérieur ; les attributs sur form sont une autre couche
Erreurs fréquentes
- Contrôles sans label
- titre div au lieu de legend
- submit ou champs hors form
- input d’une ligne pour messages longs
- oublier name
- croire que reset enregistre sur le serveur
- penser que cette leçon remplace action/method
Résumé
- Les éléments de formulaire sont les contrôles dans form
- label, input, textarea, select, button, fieldset/legend couvrent la plupart des UI débutants
- Toujours étiqueter ; regrouper avec fieldset
- Adaptez le contrôle à la question
- Attributs du form et types d’input sont des couches distinctes
- ensuite : types d’input
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut