HTML Select: Auswahlliste für Formulare

Auswahlliste für mehrere Optionen

Eine oft genutzte 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. Man könnte die gleiche Aktion auch mit den Checkboxen ausprobieren und würde ein ähnliches Ergebnis erzielen.

Aber die Auswahllisten wirken ein wenig professioneller und können bei einer längeren Liste mit mehr Einträgen auch platzsparend eingesetzt werden. So ist denkbar, dass man 5 Einträge hat, aber nur Platz für 3 Stück belässt und arbeitet ein wenig mit der Neugierde der Besucherinnen und Besucher, die wissen wollen, was noch als Antwort angeboten wird.

Mit Select Auswahlliste für Formulare aufbauen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

ergibt

Mit dem HTML-Tag select werden Auswahllisten innerhalb eines Formulars 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.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

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 genutzt 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.

Mit CSS kann man auch die Gestaltung noch verbessern, etwa die Schriftgröße, Abstände oder auch Hintergrundfarben und die Schriftfarbe selbst, sodass man wie bei den meisten Formularfeldern einige Gestaltungsoptionen nutzen kann.

Lesen Sie auch

Die Formulare sind überraschend wichtige Elemente auf der Webseite, denn jede größere Plattform hat auch eine Suchmaschine und damit auch ein Eingabefeld - ergo ein Formular für diesen Zweck. Es gibt aber unterschiedliche Methoden, was und wie man für das Formular braucht. Typisch sind das Textfeld, das versteckte Textfeld für Bearbeitungen wie der aktuellen Artikelnummer und ein großes mehrzeiliges Feld für Fragen und Kommentare. Außerdem braucht es das form-Tag als generelles Element für Formulare und die Schaltfläche zum Abschicken.

Weitere Möglichkeiten bestehen mit Auswahlfeldern. Das kann die Checkbox sein, um eine Antwortoption zu aktivieren, die Radiobuttons für ja/nein-Situationen oder auch die Auswahlliste, wenn mehrere Antworten vorgeschlagen werden.

Bei den Formularen gibt es noch weitere Möglichkeiten, die sehr wichtig sein können. Eine Variante ist die Beschreibung durch den label-Tag, wodurch auch die Formatierung besser gelingt und eine weitere kann sein, dass man schreibgeschützte Felder einsetzt.

Themenseiten

Startseite HTML-Grundlagen

HTML Select: Auswahlliste für Formulare

Auswahlliste für mehrere Optionen

Mit Select Auswahlliste für Formulare aufbauen

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich