Formulare erstellen mit Menüs mit select und option

Auswahlmenü erstellen mit select-Element

Das <select>-Element erstellt ein Auswahlmenü. In diesem Auswahlmenü kann der Benutzer, wie in den Menüs, die man in den meisten Software-Anwendungen findet, auswählen. Im Grunde dient <select> nur zur Definition des Gerüsts einer Auswahlliste. Zur Erstellung der Einträge müssen Sie zumindest ein <option>- oder <optgroup>-Tag einfügen.

Um ein Auswahlmenü zu erstellen, fügen Sie zunächst das öffnende <select>-Tag ein und weisen dessen name-Attribut einen Wert – den Namen des Elements – zu:

<select name="location">

Geben Sie als Nächstes Ihren Menüeintrag unter Verwendung des <object>-Tags ein.

<p>
	Please pick a travel destination:
</p>
<select name="location">
	<option>Indiana</option>
	<option>Fuji</option>
	<option>Timbuktu</option>
	<option>Alaska</option>

Geben Sie schließlich das abschließende Tag nach dem </select>-Element ein.

 
<select name="location">
	<option>Indiana</option>
	<option>Fuji</option>
	<option>Timbuktu</option>
	<option>Alaska</option>
</select>

In Abbildung sehen sie eine Auswahlliste mit vier Einträgen.

Zur Erstellung einer Bildlaufliste am Rand der Liste fügen Sie einfach nur das size-Attribut in das einleitende <select>-Element, wie im folgenden Beispiel, hinzu.

<select name="location" size="2">

In Abbildung 1 sehen Sie das gleiche <select>-Element wie in Abbildung 2. Allerdings ist das size-Attribut auf 2 eingestellt. Beachten Sie, dass die Auswahlliste nun eine Bildlaufleiste aufweist.

Formulare mit Menüs mit select und option

Formulare mit Menüs mit select und option

Das <select>-Element reduziert die Höhe der sichtbaren Fläche auf zwei Einträge der Auswahlliste. Wenn Benutzer weitere Optionen sehen möchten, so müssen sie das Bild scrollen.

Um Daten zum Server zu senden, die sich von den angezeigten Einträgen der Liste unterscheiden, können Sie das value-Attribut der <option>-Tags verwenden. Das ist vor allem dann sinnvoll, wenn Sie die Daten verarbeiten und einen Zahlenwert oder andere codierte Werte benötigen. Der folgende Code zum Beispiel erzwingt das Zurücksenden von bw499 für courses anstatt Basket Weaving 499.

<select name="courses">
	<option value="p101">Programming 101</option>
	<option <option 
	<option value="e312">Ecomomics 312</option>
	value="pe221">Physical Education 221</option>
	value="bw499">Basket Weaving 499</option>
</select>

Um Optionen vorauszuwählen, fügen Sie das selected-Attribut in einem <option>-Tag, wie im folgenden Beispiel, hinzu:

<select name="courses">
	<option <option <option 
	<option value="p101">Programming 101</option>
	value="e312">Ecomomics 312</option>
	value="pe221" selected>Physical Education 221</option>
	value="bw499">Basket Weaving 499</option>
</select>

Dieser Code zwingt die Auswahlliste zum Anzeigen von Physical Education 221 als Anfangswert.

Bis jetzt haben Sie Auswahllisten erstellt, in denen ein Benutzer nur eine Wahl treffen kann. Sie können das aber ganz einfach ändern: Fügen Sie das multiple-Attribut in das <select>-Element, wie im folgenden Beispiel, hinzu, und schon ist die Auswahl mehrerer Einträge möglich:

<select name="courses" multiple>

Ein Benutzer kann mehrere Optionen mit [Shift] +Klicken [bei Windows], mit [Ctrl] +Klicken oder mit [Command] +Klicken [bei Macintosh] auswählen.

Um nun langsam das Thema Auswahllisten zu beenden, möchte ich kurz auf die <optgroup>-Tags eingehen. Theoretisch teilt dieses Tag <option>-Elemente in Gruppen ein und erstellt Untermenüs.

Sie sollten <optgroup>-Tags in <select>-Elemente platzieren. Das <optgroup>-Tag sollte, wie im folgenden Beispiel auch <option>-Tags enthalten.

<select name="futility">
	<optgroup label="mild"> 
	<option>Swimming upstream</option>
	<option>Shaving with no shaving cream</option>
	</optgroup> <optgroup label="extreme"> 
	<option>Sqeezing blood from turnips</option>
	<option>Crying over spilled milk</option>
	</optgroup> 
</select>