Auswahllisten und Textbereiche

Für den Termin eines Kochkurses gibt es drei Samstage zur Auswahl, für Wünsche und Unverträglichkeiten ein paar Zeilen Platz. Beides passt nicht ins Muster der bisherigen input-Felder, und für beides hat HTML ein eigenes Element.

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 die Auswahlliste, jede Möglichkeit darin ist ein option. Anders als input ist select kein Void-Element, die Optionen stehen als Inhalt darin.

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

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

selected wählt eine Option vor, im Beispiel den Hauptgang. Ohne diese Angabe stünde die erste Option da, und deshalb ist der erste Eintrag oft ein leerer Platzhalter wie <option value="">Bitte wählen</option>. Dann sieht man, dass noch nichts gewählt ist. Ohne das selected im Beispiel steht genau dieser Platzhalter oben.

Mit dem Attribut multiple erlaubt ein select mehrere Treffer, nur weiß kaum jemand, dass er dafür Strg oder Cmd gedrückt halten muss. Mehrere Checkboxen sind fast immer 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. Den Namen der Gruppe trägt ihr label-Attribut, und auswählen lässt er sich nicht.

Bei vier Optionen braucht man das nicht. Bei einer Liste mit allen Rezepten des Blogs oder allen Ländern der Welt macht es den 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 der Textbereich für Nachrichten, Kommentare und Beschreibungen. rows gibt die Höhe in Zeilen an, cols die Breite in Zeichen. Beides sind Startwerte, die Feinabstimmung macht CSS, und an der unteren rechten Ecke lässt sich das Feld außerdem größer ziehen.

Ein textarea hat kein value-Attribut. Der Startinhalt steht zwischen dem öffnenden und dem schließenden Tag, so wie im zweiten Feld des Beispiels.

04 / 04Leer, aber nicht leer

<form>
  <label for="wunsch">Dein Rezeptwunsch</label>
  <textarea id="wunsch" name="wunsch" rows="3">
  </textarea>
</form>

Das Feld sieht leer aus. Zwischen den beiden Tags stehen aber ein Zeilenumbruch und die zwei Leerzeichen, mit denen die nächste Zeile eingerückt ist. Den ersten Umbruch direkt hinter <textarea> schluckt der Browser, die Leerzeichen danach landen als Inhalt im Feld, und wer nichts tippt, schickt sie mit. Die Eingabezeile der Console bestätigt das. document.querySelector("textarea").value.length antwortet mit 2.

Ein leerer Textbereich braucht deshalb beide Tags direkt hintereinander, <textarea ...></textarea>, so wie im ersten Feld des Beispiels davor. Die gewohnte Einrückung ist hier ausnahmsweise falsch.

Ein Element für den Zwischenfall gibt es noch. datalist schlägt zu einem normalen Textfeld Werte vor, ohne die Eingabe darauf zu beschränken, die HTML-Referenz unter datalist zeigt, wie man es anbindet.

In der Aufgabe kommen eine Auswahlliste und ein Textbereich in die Anmeldung für einen Kochkurs.