HTML Select
Zuvor sammelte textarea freien Mehrzeilentext. Select ist anders: eine Antwort aus einer festen Liste wählen — nicht frei tippen.
Warum select existiert
Versand, Menüs und Einstellungen brauchen geschlossene Mengen. Tippen streut Daten; teh aus einer Liste nicht. select ist das Steuerelement; jede option eine Wahl. Weiterhin label und name am select.
Direkte Antwort
1) select mit option. 2) label verbinden. 3) name am select; value an option. 4) Optional leere Option, selected, disabled, optgroup. 5) Listenwahl — kein textarea-Absatz.
📊 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 |
Versand: Stadt-Select
Liefernotiz als einzeiliges input, Stadt als select. Zuerst Choose mit leerem value. Codes teh/isf werden gesendet.
<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>
Stadt-Demo lesen
- Listensteuerung ist select, nicht textarea
- id passt zu label for
- name ist der Submit-Schlüssel
- Jede option hat kurzen value
- Leerer value verhindert Zufallsdefault
- required bis echte Stadt
- Notiz ist einzeiliges input
Gerichte mit optgroup
Zweites Demo mit Veg/Other. selected als Default; disabled für ausverkauft.
<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>
Gerichte-Demo lesen
- optgroup ist AbschnittsTitel, nicht Submit-Wert
- value kommt von der option
- selected auf Soup
- disabled auf Grill
- label und name bleiben
- weiter: datalist für Vorschläge mit Tippen
Select vs textarea vs input
- Bekannte Liste: select
- Freie Absätze: textarea
- Kurze Zeile: input
- name am select; value an option
- Immer label
- Liste nicht in textarea tippen
Übung — bauen und gruppieren
- Vierte Stadt mit kurzem value
- Choose-Text ändern; value leer lassen
- required testen
- Soup zwischen Gruppen verschieben
- disabled an Grill testen
- Satz: select sendet value; textarea freien Text
- Tippen mit Vorschlägen → nächstes datalist
Typische Fehler
- value fehlt trotz Code-Wunsch
- name am select vergessen
- Kein label
- Optionen in textarea
- Lange Liste ohne optgroup
- name an jeder option
- Verwechslung mit datalist
Zusammenfassung
- select + option = Listenwahl
- label und name am select
- option-value wird gesendet
- Optional Prompt, selected, disabled, optgroup
- Kein freier Mehrzeilentext
- weiter: datalist
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt