Auswahllisten und Textbereiche

Zwei Felder, die nicht ins input-Muster passen: eine Auswahlliste aus vorgegebenen Werten und ein Feld für längeren Text.

01 / 04select und option

<form>
  <label for="gang">Gang</label>
  <select id="gang" name="gang">
    <option value="">Bitte wählen</option>
    <option value="vorspeise">Vorspeise</option>
    <option value="hauptgang" selected>Hauptgang</option>
    <option value="nachtisch">Nachtisch</option>
  </select>
</form>

select ist das Auswahlmenü, jede Wahlmöglichkeit ist ein option. Anders als input ist select kein Void-Element, die Optionen stehen als Inhalt darin.

Der name steht am select, nicht an den Optionen. Das ist der Unterschied zu den Radios: Dort war jedes Feld eigenständig und brauchte den gemeinsamen name, hier ist das select schon die Klammer.

value steht an jedem option und ist das, was übertragen wird. Fehlt es, schickt der Browser den sichtbaren Text. Das funktioniert, ist aber unpraktisch, sobald jemand die Beschriftung ändert oder die Seite übersetzt wird.

selected wählt eine Option vor, im Beispiel den Hauptgang. Ohne diese Angabe stünde die erste Option im Menü, und deshalb ist der erste Eintrag oft ein leerer Platzhalter wie hier: <option value="">Bitte wählen</option>. Damit ist sichtbar, dass noch nichts gewählt wurde. Nimm im Beispiel testweise das selected heraus, dann siehst du ihn.

Ein select mit dem Boolean-Attribut multiple erlaubt Mehrfachauswahl. In der Praxis wird das selten genutzt, weil viele Nutzer nicht wissen, dass sie dafür Strg beziehungsweise Cmd halten müssen. Mehrere Checkboxen sind meistens die bessere Wahl.

02 / 04Lange Listen gruppieren

<form>
  <label for="rezept">Rezept</label>
  <select id="rezept" name="rezept">
    <optgroup label="Suppen">
      <option value="linsen">Linsensuppe</option>
      <option value="kuerbis">Kürbissuppe</option>
    </optgroup>
    <optgroup label="Aus dem Ofen">
      <option value="gemuese">Ofengemüse</option>
      <option value="auflauf">Auflauf</option>
    </optgroup>
  </select>
</form>

optgroup fasst zusammengehörige Optionen unter einer Überschrift zusammen. Das label-Attribut trägt den Gruppennamen, und der ist nicht auswählbar, sondern nur Beschriftung.

Ab etwa zehn Optionen lohnt sich das. Bei einer Länderliste oder einer Produktkategorie ist der Unterschied zwischen Suchen und Finden.

03 / 04textarea

<form>
  <label for="nachricht">Deine Nachricht</label>
  <textarea id="nachricht" name="nachricht" rows="5" cols="40"></textarea>

  <label for="notiz">Notiz mit Startinhalt</label>
  <textarea id="notiz" name="notiz" rows="3">Hier steht schon etwas.</textarea>
</form>

textarea ist das mehrzeilige Feld für Nachrichten, Kommentare und Beschreibungen.

Es hat eine Eigenheit, die immer wieder überrascht: textarea hat kein value-Attribut. Der Startinhalt steht zwischen dem öffnenden und schließenden Tag, so wie beim zweiten Feld im Beispiel. Und weil dort fast alles zählt, was du hinschreibst, muss ein leeres textarea auch wirklich leer sein. Schreibst du das öffnende und schließende Tag mit Umbruch und Einrückung dazwischen, stehen genau diese Leerzeichen später im Feld. Nur den allerersten Zeilenumbruch direkt hinter <textarea> schluckt der Browser, die Einrückung danach nicht.

rows gibt die Höhe in Zeilen an, cols die Breite in Zeichen. Beides sind nur Startwerte, die Feinabstimmung macht CSS. Nutzer können das Feld an der unteren rechten Ecke außerdem selbst größer ziehen.

04 / 04Vorschläge statt Vorgaben

Zum Schluss ein Element für den Zwischenfall: datalist bietet Vorschläge zu einem normalen Textfeld an, ohne die Eingabe darauf zu beschränken. Man verbindet es über das list-Attribut am input mit der id der datalist. Der Nutzer sieht beim Tippen passende Vorschläge, darf aber auch etwas ganz anderes eintragen. Genau das unterscheidet es vom select, das nur die vorgegebenen Werte zulässt.