Auswahlmenü (Dropdown-Liste) in HTML-Formularen

Auf Webseiten werden in Formularen häufig Auswahlfelder benötigt, aus denen der Benutzer einen oder mehrere Werte auswählen kann. Ob der Benutzer einen oder mehrere Werte auswählen kann, wird über entsprechende Befehle vom Entwickler vorgegeben. Typischer Anwendungsfall von nur einem Wert kann bei der Frage nach dem Geschlecht sein. Mehrere Werte können z.B. bei Online-Bewerbungsformularen sinnvoll sein, damit die Bewerber ihre Kenntnisse und Erfahrungen in mehreren Fachgebieten angeben können. Daher wird bei den Auswahlfeldern zwischen drei Varianten unterschieden.

Als Menü: Diese werden auch Dropdown-Liste genannt. Hierbei ist nur eine Auswahl möglich. Das Formularfeld erhält auf der rechten Seite eine Pfeilschaltfläche, worüber die Liste geöffnet wird.
Als Liste mit nur einer Auswahlmöglichkeit: Hierbei ist das Auswahlfeld sinnvollerweise mindestens 2 Zeilen hoch. Der Benutzer kann trotzdem nur einen Wert auswählen. Enthält die Liste mehr Werte als im anzeigbaren Bereich darstellbar ist, wird die Scrollleiste auf der rechten Seite automatisch aktiv und es kann hoch und runter gescrollt werden.
Als Liste mit mehreren Auswahlmöglichkeiten: Die Liste kann auch so gestaltet werden, dass eine Mehrfachauswahl möglich ist. Mehrere Werte werden dabei mit gedrückter STRG-Taste + Mausklick ausgewählt.

HTML-Code für ein Auswahlmenü

Ein Auswahlmenü wird mit dem SELECT-Tag erstellt. Die einzelnen Einträge werden mit dem OPTION-Tag erstellt, die sich innerhalb des SELECT-Tags befinden. Ein Beispielcode, um ein Auswahlmenü mit den beiden Einträgen "Kunst" und "Natur" zu erstellen, hat folgende Grundform.

<select>
  <option>Kunst</option>
  <option>Natur</option>
</select>

Die Einträge innerhalb von <option> ... </option> sind im Browser sichtbar und dienen zur Ansicht für den Benutzer. Daher sollte man an dieser Stelle auf die korrekte Groß- und Kleinschreibung achten. Sie können auch Leer- oder Sonderzeichen enthalten, weil das nicht die Werte sind, die beim Abschicken des Formulars übertragen werden. Sie dienen nur dazu, dem Benutzer angezeigt zu werden.

Attribute für den SELECT-Tag

Ein Auswahlmenü kann viele Attribute enthalten, die mit einem Leerzeichen getrennt eingegeben werden können. Hierbei muss man zwischen den Attributen für den SELECT-Tag und den OPTION-Tag unterscheiden. Für den SELECT-Tag sind vor allem folgende Attribute wichtig.

size: Darüber wird gesteuert, ob das Auswahfeld als Menü oder als Liste dargestellt wird. Ist das Attribut nicht gesetzt, ist das Auswahlfeld immer als Menü (Dropdown-Liste). Gibt man z.B. size="2" ein, ist es eine 2-zeilige Liste. Ein Beispielcode.

<select size="2">
  <option>Kunst</option>
  <option>Natur</option>
</select>

multiple: Damit eine Mehrfachauswahl möglich ist, fügt man dem SELECT-Tag das Attribut multiple hinzu. Das Attribut gehört zu den leeren Attributen und kann daher in HTML in verkürzter Form geschrieben werden. In XHTML muss dagegen die Langform verwendet werden. Ein Beispielcode.

<!-- In HTML -->
<select size="2" multiple>
  <option>Kunst</option>
  <option>Natur</option>
</select>

<!-- In XHTML -->
<select size="2" multiple="multiple">
  <option>Kunst</option>
  <option>Natur</option>
</select>

name: Über das Attribut kann einem Auswahlmenü in der Form name="..." ein Name zugewiesen werden. Der Name ist z.B. wichtig, wenn die Formulardaten an ein PHP-Script geschickt werden. Denn, über den Namen kann ausgelesen werden, welche Einträge der Benutzer ausgewählt hat. Ein Beispielcode.

<select size="2" name="schulfach">
  <option>Kunst</option>
  <option>Natur</option>
</select>

Wenn das Attribut multiple gesetzt wurde und somit eine Mehrfachauswahl möglich ist, dann ist der Rückgabewert beim Auslesen des Feldes ein Array. Das funktioniert jedoch nur, wenn der Name mit eckigen Klammern endet. Das Attribut müsste dann in der Form name="schulfach[]" angegeben werden.

Attribute für den SELECT-Tag ab HTML5

Ab HTML5 sind einige neue Attribute hinzugekommen. Folgende Attribute betreffen auch den SELECT-Tag.

required: Definiert ein Pflichtfeld. Ist lediglich eine clientseitige Prüfung durch den Browser.
autofocus: Legt fest, dass nach dem Laden der Webseite der Fokus auf das Auswahlmenü gelegt wird. Darf auf einer Seite nur einem Formularfeld zugewiesen werden.

Beide Attribute zählen zu den leeren Attributen, die ab HTML5 ohne Wert (verkürzte Form) oder in Langform (XHTML-Schreibweise) angegeben werden können. Ein Beispielcode.

<!-- HTML-Schreibweise -->
<select name="schulfach" required autofocus>
  <option>Kunst</option>
  <option>Natur</option>
</select>

<!-- XHTML-Schreibweise -->
<select name="schulfach" required="required" autofocus="autofocus">
  <option>Kunst</option>
  <option>Natur</option>
</select>

form: Vor HTML5 mussten die Formularelemente innerhalb des FORM-Tags platziert werden. Ab HTML5 ist das nicht mehr zwingend notwendig. Wenn über das Attribut form die ID des Formulars angegeben wird, kann es auch außerhalb platziert werden. Ein Beispielcode.

<!-- Ab HTML5 -->
<form id="formularid">
</form>

<!-- Auswahlmenü außerhalb des FORM-Tags -->
<select name="schulfach" form="formularid">
  <option>Kunst</option>
  <option>Natur</option>
</select>

Attribute für SELECT- und OPTION-Tag

Manche Attribute können sowohl dem SELECT-Tag, als auch dem OPTION-Tag zugewiesen werden. Dazu zählen folgende.

id: Fast allen Elementen kann in HTML eine ID zugewiesen werden. Die Unterschiede zum Namen und was man dabei beachten sollte, sind unter Attribut für die ID erläutert.
disabled: Mit diesem Attribut wird ein Element deaktiviert. Weist man das Attribut dem SELECT-Tag zu, ist das komplette Menü deaktiviert. Beim OPTION-Tag wird ein einzelner Eintrag deaktiviert. Beim Abschicken werden keine Daten für das Feld übertragen. Das Attribut disabled könnte man z.B. nutzen, um das Formular mit Hilfe von JavaScript und PHP so zu programmieren, dass die Verfügbarkeit eines Menüs bzw. Menüeintrags von den Werten der übrigen Felder abhängt.

Attribute für den OPTION-Tag

Für den OPTION-Tag können folgende Attribute zugewiesen werden.

value: Das wichtigste Attribut für den OPTION-Tag dürfte value sein. Damit wird einem Eintrag ein Wert zugewiesen. Beim Abschicken des Formulars wird der Wert des Eintrags übertragen, der ausgewählt wurde. Über den Namen kann der Wert ausgelesen werden.

Dazu ein Beispiel. Einem Menü, das als Dropdown-Liste angezeigt wird, wird das Attribut name="schulfach" zugewiesen. Es enthält die beiden Einträge für Kunst und Natur. Für Kunst wird das Attribute value="kunst" zugewiesen und für Natur value="natur". Das Formular wird an ein PHP-Script abgeschickt. Das Script ist so programmiert, dass der Wert von schulfach abgefragt wird. Als Rückgabewert würde man, je nachdem was vom Benutzer ausgewählt wurde, kunst oder natur erhalten.

Der Wert ist nicht der Eintrag, der im Browser sichtbar ist, wenn man z.B. das Menü öffnet. Die sichtbaren Einträge werden innerhalb der OPTION-Tags (<option> ... </option>) eingegeben. Ein Beispielcode mit dem Attribut value.

<select name="schulfach">
  <option value="kunst">Kunst</option>
  <option value="natur">Natur</option>
</select>

In diesem Beispiel wurde bei den sichtbaren Einträgen (innerhalb <option> ... </option>) auf die Groß- und Kleinschreibung geachtet. Beim Attribut value="..." wurde dagegen die Kleinschreibung verwendet. Warum man bei den Werten soweit es geht die Kleinschreibung anwendet, wird auf der Seite für Radiobuttons unter Gründe für die Kleinschreibung der Werte erläutert.

label: Mit diesem Attribut kann man einem OPTION-Tag eine verkürzte Form für die sichtbaren Einträge zuweisen. Das ist z.B. bei zu langen Einträgen nützlich. Ein typischer Anwendungsfall wäre ein Produkt mit vielen technischen Spezifikationen, z.B. in der Form "Produktname X, Modell Y, Version X.Y, Firmwareversion X.Y...". Weist man bei solchen Einträgen das Attribut label zu, wird im Browser die verkürzte Form angezeigt. Ein Beispielcode.

<select name="produkte">
  <option value="produktx" label="Produkt X">Produktname X, Modell Y, Version X.Y</option>
  <option value="produkta" label="Produkt A">Produktname A, Modell B, Version A.B</option>
</select>

Gruppieren von Einträgen mit dem OPTGROUP-Tag

Bei sehr großen Auswahlmenüs kann es sinnvoll sein, mehrere Einträge zu gruppieren. Die Gruppierung kann mit dem OPTGROUP-Tag erfolgen. Dabei werden die zu gruppierenden OPTION-Tags vom OPTGROUP-Tag umschlossen. Damit die Gruppe eine Überschrift erhält, verwendet man das Attribut label="...". Ein Beispielcode.

<select name="produkte">

<optgroup label="Produkte A - C">
  <option value="produkta">Produkt A</option>
  <option value="produktb">Produkt B</option>
  <option value="produktc">Produkt C</option>
</optgroup>

<optgroup label="Produkte D - F">
  <option value="produktd">Produkt D</option>
  <option value="produkte">Produkt E</option>
  <option value="produktf">Produkt F</option>
</optgroup>

<optgroup label="Produkte G - I">
  <option value="produktg">Produkt G</option>
  <option value="produkth">Produkt H</option>
  <option value="produkti">Produkt I</option>
</optgroup>

</select>

Die Gruppenüberschriften können nicht ausgewählt werden. Außerdem ist eine Gruppierung nur mit der Tiefe von einer Ebene möglich. Eine Verschachtelung mit tieferen Ebenen ist nicht möglich.

SELECT-Tag in Block-Element einfügen

Der SELECT-Tag zählt zu den Inline-Elementen und muss für die korrekte Syntax in einem Block-Element wie z.B. einem DIV-Tag eingefügt werden. Ein Beispielcode.

<div>
  <select name="schulfach">
    <option value="kunst">Kunst</option>
    <option value="natur">Natur</option>
  </select>
</div>

Das Aussehen des Auswahlfelds und des umschließenden Block-Elements kann über CSS geändert werden.