Select en HTML
Avant, textarea recueillait du texte libre multiligne. Select est un autre rôle : choisir une réponse dans une liste fixe, pas taper librement.
Pourquoi select existe
Livraison, menus et réglages demandent un ensemble fermé. La saisie libre salit les données ; choisir teh dans une liste non. select est le contrôle ; chaque option un choix. Il faut encore label et name sur le select.
Réponse directe
1) select avec option. 2) Reliez un label. 3) name sur select ; value sur option. 4) Optionnel : invite vide, selected, disabled, optgroup. 5) Choix de liste — pas des paragraphes textarea.
📊 Select pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| select | Choice container | Owns name= for the submitted field key |
| option | One choice | value= is what posts; text is what users see |
| optgroup | Section header | Groups options; not itself submitted |
| name (on select) | Submit key | Required if the choice should post |
| id (on select) | Label hook | Match label for= |
| value (on option) | Submitted token | Prefer short stable codes (teh, salad) |
| selected | Default pick | At most one in a single-select list |
| disabled (option) | Unavailable | Shown but not choosable |
Livraison : select ville
Note en input une ligne ; ville en select. D’abord Choose avec value vide. Codes teh/isf envoyés.
<form action="/ship" method="post">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Choose…</option>
<option value="teh">Tehran</option>
<option value="isf">Isfahan</option>
<option value="shir">Shiraz</option>
</select>
<label for="note">Delivery note</label>
<input id="note" name="note" type="text" placeholder="Gate code, floor…">
<button type="submit">Continue</button>
</form>
Lire la démo ville
- Le contrôle liste est select, pas textarea
- id assorti au label for
- name est la clé soumise
- Chaque option a un value court
- value vide évite un défaut accidentel
- required jusqu’à une vraie ville
- La note est un input une ligne
Repas avec optgroup
Deuxième démo Veg/Other. selected par défaut ; disabled si épuisé.
<label for="meal">Meal</label>
<select id="meal" name="meal">
<optgroup label="Veg">
<option value="salad">Salad</option>
<option value="soup" selected>Soup</option>
</optgroup>
<optgroup label="Other">
<option value="stew">Stew</option>
<option value="grill" disabled>Grill (sold out)</option>
</optgroup>
</select>
Lire la démo repas
- optgroup titre une section ; non soumis
- value vient de l’option choisie
- selected sur Soup
- disabled sur Grill
- Toujours label et name
- Suite : datalist pour suggestions avec saisie
Choisir select vs textarea vs input
- Choix connu : select
- Paragraphes libres : textarea
- Ligne tapée : input
- name sur select ; value sur option
- Toujours label
- N’écrivez pas la liste dans un textarea
Pratique — construire et grouper
- Quatrième ville avec value court
- Changez Choose ; gardez value=""
- Testez sans required puis restaurez
- Déplacez Soup entre groupes
- Testez disabled sur Grill
- Phrase : select envoie value ; textarea texte libre
- Suggestions tapées → datalist ensuite
Erreurs faciles
- Sans value alors qu’un code était voulu
- Oublier name sur le select
- Sans label
- Options dans un textarea
- Longue liste sans optgroup
- name sur chaque option
- Confusion avec datalist
Résumé
- select + option = choisir dans une liste
- label et name sur le select
- Le value de l’option est envoyé
- Optionnel invite, selected, disabled, optgroup
- Pas de texte multiligne libre
- Suite : datalist
🧠 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