Sie sind hier: Startseite -> HTML-Grundlagen -> Formulare -> Auswahlfeld

HTML-Grundlagen: Select

Select: Auswahlliste für mehrere Optionen

Eine oft genützte Funktion in Formularen von Webseiten sind die Auswahllisten. Diese werden mit dem HTML-Tag select etabliert und bieten die Möglichkeit an, zu ein- und demselben Punkt verschiedene Antworten auszuwählen.

ergibt:

Mit select werden Auswahllisten innerhalb eines Formulares gebaut, wie das Beispiel zeigt. Dabei können beliebig viele Einträge vorgenommen werden, die jeweils, wie der Code demonstriert, mit dem option-Tag innerhalb von Select festgelegt werden. Dabei ist es auch möglich, einen Eintrag als Vorgabe zu selektieren, der dann auch als solches angezeigt wird und zwar erreicht man das durch den Zusatz selected, wie er im Beispiel beim Eintrag Regen vorgenommen wurde.

Select ist eine einfache Konstruktion, mit der auch umfangreiche Listen möglich werden. Denken Sie zum Beispiel an ein Formular für eine Webseite mit Kunden in der Schweiz. Diese haben 26 Kantone, in die sich die Schweiz aufteilt, auch in Deutschland sind es 15 Bundesländer, selbst in Österreich 9 Stück. Natürlich könnte man auch ein Textfeld anbieten, aber a) ist es gemütlicher für die Besucherinnen und Besucher, das Bundesland oder den Kanton per Maus auszuwählen und b) vermeidet man damit Tippfehler, die bei der Datenbankabfrage zu Problemen führen können. Denn wenn jemand statt Wien Wein eingibt, wird er nicht mehr gefunden, wenn nach Wien gesucht wird.

Deshalb wird die select-Auswahlliste oft und gerne eingesetzt. Sie kann in der Darstellung sehr unterschiedlich genützt werden. Im Beispiel habe ich die Größe auf 3 gesetzt, das bedeutet, dass man ohne Scrollen drei Einträge sehen kann. Man könnte sie auch auf 1 setzen oder so groß aufziehen wie Einträge vorhanden sind.

Ebenfalls interessant:

Formular (FORM)

Informationen über den FORM-Tag, mit dem ein Formular in eine Webseite eingebaut werden kann.

Checkbox

Informationen über die Checkboxen, die in Formulare eingebaut werden können.

Radiobutton

Informationen über den Radiobutton, der in HTML-Formulare für die Beantwortung genützt werden kann.

Schaltfläche

Informationen über die Schaltfläche, wie sie in Formularen programmiert wird.

[aktuelle Seite]

Auswahlfeld

Informationen über die Auswahlliste mit Select, die bei HTML-Formularen oft genützt wird.

Auswahlfeld mehrfach

Informationen über die Auswahlliste mit select multiple, wodurch in HTML-Formulare eine Mehrfachauswahl möglich wird.

Textfeld

Informationen über das Textfeld, das in HTML-Formularen mit dem input-Tag erstellt werden kann und seine Parameter.

Mehrzeiliges Feld

Informationen über das mehrzeilige Textfeld in HTML-Formularen durch den textarea-Tag.

Verstecktes Feld

Informationen über das versteckte Formularfeld, das mit dem input-Tag unter HTML möglich wird, um interne Informationen einzubauen.

Schreibschutz

Informationen über den Schreibschutz bei Formularfelder in HTML-Formulare, der durch den Parameter readonly möglich wird.

Datei hochladen

Informationen über die Möglichkeit, Dateien über ein Formular durch den Type File des input-Tags hochzuladen.

Beschriftung

Informationen über den Label-Tag für die Beschriftung von HTML-Formularfelder und zur Formatierung mit CSS bzw. als Hilfe für barrierefreie Formulare.

Zurück zum Hauptthema

Übersicht Formulare

Startseite HTML-Grundlagen