3.1 HTML Datalist vs. Select

Die folgenden Unterkapitel zeigen die Möglichkeiten, welche die HTML-Elemente input, option, datalist und select bieten. Zudem zeigen tabellarische Gegenüberstellungen die Unterschiede und Inkonsistenzen dieser in verschiedenen Browsern und Betriebssystemen auf. Hierbei liegt der Fokus mehr auf der Interaktion mit den Komponenten als auf der Darstellung.

3.1.1 Option

Die beiden Auswahlkomponenten – datalist und select – verwenden option-Elemente. Die einzelnen Optionen wie in Code 3.1 Zeile 1 besitzen ein value-Attribut und einen Inhalt – das Label. Alternativ ist das label-Attribut (Zeile 2 ohne das selected) zu nutzen. An die Stelle des Inhalts ist das Value zu platzieren. Firefox unterstützt diese Variante jedoch nicht. Das Weglassen von value und label führt dazu, dass beide den Wert innerhalb des öffnenden und schliessenden Tags erhalten. Diese Variante ist in Zeile 3 (ohne das disabled) verwendet.

Code 3.1: Beispiel – Option

<option value="dog"         > Dog   </option> 
<option label="Cat" selected> cat   </option> 
<option             disabled> Mouse </option>

Das HTML-Element kann das Attribut disabled oder selected erhalten. Code 3.1 Zeile 2 definiert durch eine selected Option den initial ausgefüllten Wert. Dieses Attribut funktioniert nur im Zusammenhang mit dem select-Container. Bei einem disabled Element – wie in Code 3.1 Zeile 3 – erscheint das UI ausgegraut. Dieser Eintrag lässt keine Interaktion zu.

Das Designen von options [1] beschränkt sich auf die Text-/Hintergrundfarbe, welche jedoch nur in Firefox funktionieren. Die anderen Browser lassen kein Styling der Auswahl-Elemente zu bzw. zeigen dieses nicht an. Es ist nur ein skalarer Text als Inhalt erlaubt. Das bedeutet, keine weiteren Verschachtelung von Elementen ist möglich. Als Eltern-Elemente sind select, optgroup und datalist erlaubt. Alle gängigen Browser unterstützen das option-Element.

3.1.2 Select

Das select-Element speichert Werte durch die einzelnen option-Kinder. Eine mögliche Anwendung ist in Code 3.2 ersichtlich.

Code 3.2: Beispiel – Select

<select name="animal" disabled>
    <option value="dog"  > Dog   </option> 
    <option value="cat"  > Cat   </option> 
    <option value="mouse"> Mouse </option>
</select>

Die typischen Attribute für Eingabefelder – wie disabled, name und required – sind bei einem Select ebenfalls verwendbar. Durch das disabled (Zeile 1) zeigt sich das Element in einer ausgegrauten Erscheinung. In diesem Zustand bietet das Select dem Nutzer keine Interaktionsmöglichkeiten mehr. Der Container – z. B. fieldset – vererbt dieses Attribut weiter an seine Kinder. Die form-Eigenschaft definiert das dazugehörige Formular. Der name (Zeile 1) stellt den Key für das Key-Value-Paar bzw. den Name des Feldes im Formular dar. Das required erzwingt eine Eingabe, um das Senden des Formulars freizuschalten. Für eine bessere Accessibility benötigt das Select eine id, um das Label zuweisen zu können. Standardmässig ist für dieses Feld nur eine einzelne Auswahl möglich. Durch die Ergänzung des Attributs multiple ist es möglich, mehrere Werte zu markieren. Bei einer Vorauswahl mehrerer Listenelemente durch selected muss die Komponente ein Multiselect sein. Wenn jedoch bei einem Single-Select mehrere Optionen das selected-Attribut enthalten, gilt das zuletzt Definierte als vorausgewählt. Das autocomplete funktioniert wie bei anderen Inputs, indem Vorschläge des User-Agent-Features auftauchen. Durch die autofocus-Eigenschaft sind Interaktionen mit dem Feld direkt nach dem Laden möglich. Die Definition des size-Attributs steuert die Anzahl sichtbarer Elemente. Der Default für Single-Selects liegt bei eins und für eine mehrfache Auswahl bei vier. Die – in Kapitel Bekannte Implementationen – definierten Browser unterstützen alle select-Attribute – ausser der size. Die meisten Mobile-Browser supporten die Grösse nicht.

Abgesehen von der Grösse ist die Umgestaltung des Elements browserunabhängig kaum möglich. Es gibt jedoch aufwendige Wege, den Inhalt zu klonen und durch Wrapper neu zu stylen. In diesem Fall ist es notwendig, die Logik und die Interaktionen für die Accessibility neu zu implementieren. Gewisse Stylings lassen sich anwenden, wobei aber nicht alle Browser diese in derselben Weise übernehmen. Durch die komplexe Struktur des Selects ist eine eigene Darstellung schwierig zu kontrollieren.

Der Inhalt [2] des Elements können options oder optgroups sein. Mehr zur optgroup kommt im nachfolgenden Unterkapitel. Die ARIA-Rolle gibt der Komponente die Funktion einer Combobox (ohne size & multiple) oder Listbox.

Die mehrfache Auswahl rein per Tastatur bietet in der Interaktion geringere Möglichkeiten als mit der Maus. Die Maus kann mit gedrückter Cmd- (Mac) bzw. Ctrl-Taste (Windows) weitere Elemente dazu selektieren. Mit dem Drücken der Shift-Taste lassen sich alle Elemente zwischen der ersten und der letzten Option markieren. Damit die zuvor markierte Auswahl erhalten bleibt, ist beim Anwenden beider Techniken der Bereich mit Shift zuerst auszuwählen. Für das Markieren mehrerer Werte mittels Tastatur ist es unabdingbar, zuerst zum ersten Element zu navigieren. Mit Shift und den Pfeiltasten ↑ und ↓ ist ein Bereich wählbar. Firefox unterstützt noch die einzelne Mehrfachauswahl über die Tastatur. Auf dem Mac sind die Tastenkombinationen Systembefehle. Daher gibt es keine Alternative, als sie zuvor auszuschalten bzw. umzustellen.

3.1.2.1 Optgroup

Die optgroup dient als Zusatzelement. Das Element gruppiert die Optionen in einem select und versieht die enthaltenen options mit einem Zwischentitel. Der Titel lässt sich durch das label-Attribut – wie in Code 3.3 Zeile 2 – setzen, ist aber nicht selektierbar.

Code 3.3: Beispiel – Optgroup

<select name="animal">
    <optgroup label="Big animal">
        <option value="dog"> Dog </option>
        <option value="cat"> Cat </option>
    </optgroup>
    <optgroup label="Small animal" disabled>
        <option value="mouse". > Mouse   </option>
        <option value="hamster"> Hamster </option>
    </optgroup>
</select>

Das disabled ermöglicht das Ausgrauen eines ganzen Blocks von Auswahloptionen. In Code 3.3 ist dies auf Zeile 6 zu sehen. Die Optionen, welche in diesem Element enthalten sind, erben das Attribut. Als Inhalt dienen option-Elemente und selbst besitzt es als Eltern-Element ein select. Die optgroup besitzt die ARIA-Rolle einer Gruppe. Alle Browser unterstützen dieses Element.

3.1.3 Datalist

Wie in Code 3.4 ersichtlich besteht die Datalist aus zwei Elementen – einem Input-Feld und einem Daten-Container. Die Datenliste besitzt keine speziellen eigenen Attribute. Das Element benötigt von den globalen Attributen zumindest eine id (Zeile 3). Die Id dient zur Verknüpfung der Liste mit dem Input-Feld. Das folgende Unterkapitel Input beschreibt das Eingabefeld und dessen Typen im Detail.

Code 3.4: Beispiel – Datalist

<input type="text" name="animal" 
       list="data" placeholder="Animal" />
<datalist id="data"> 
    <option> Dog   </option> 
    <option> Cat   </option> 
    <option> Mouse </option>
</datalist>

Das Stylen der datalist [3] ist sehr begrenzt bzw. nicht möglich. Der Datencontainer reagiert nicht auf den Zoom des Browsers. Gewisse Screenreader ignorieren die Vorschlagsliste und lesen diese dadurch auch nicht vor. Das Element erhält die ARIA-Rolle einer Listbox.

Die options einer datalist besitzen normalerweise nur ein value-Attribut und kein Label. Bei einer zusätzlichen Label-Definition kann das je nach Browser zu abweichenden Darstellungen kommen. Während Firefox nur das Label in der Liste anzeigt, visualisieren die anderen Browser das Label und das Value gemeinsam. Die Browser, welche Label und Value anzeigen, heben den Wert ein wenig hervor.

Die Darstellung kann zu Missverständnissen führen, da das Eingabefeld bei einer Auswahl nur das Value anzeigt. Die options-Werte können sich dem Typ des Inputs anpassen. Generell unterstützen alle Browser die datalist, aber Firefox nur begrenzt.

Nicht alle Browser unterstützen die Datenliste für jeden Eingabe-Typ [4]. Der textuelle Typ funktioniert in allen Browsern und die Liste öffnet sich nach einem Klick bzw. Doppelklick auf das Feld. Vordefinierte Datum- und Zeittypen funktionieren nur in den Chromium-basierten Browsern. Firefox und Safari zeigen den normalen Eingabe-Container, als ob die Liste nicht verknüpft ist. Bei der Verwendung einer Liste mit einer Range zeigen alle Browser die Optionen durch Markierungen auf dem Slider an. Die Kombination einer datalist mit einer Farbpalette zeigt eine breite, aber unterschiedliche Unterstützung. Unter den gängigen Browsern ist Firefox auf OSX der einzige, welcher die Liste nicht darstellt. Zusammengefasst bieten Chromium-basierte Browser für Listen mit den unterschliedlichsten Typen die beste Unterstützung.

3.1.3.1 Input

Dieser Abschnitt behandelt nur den Teil, welcher in Bezug auf die datalist von Belang ist. Das list-Attribut verknüpft das Input – in Code 3.4 auf Zeile 1 und 2 – mit den Auswahloptionen der Liste. Bei der Verwendung zusammen mit der datalist ist dieses Attribut Pflicht. Dadurch erscheinen die Auswahloptionen während der Bedienung des Input-Feldes.

Dieser Paragraph behandelt die in diesem Kontext für alle Typen geltenden Attribute. Das autocomplete-Attribut dient zur Anzeige der Hinweise für das Autofill-Feature des Browsers. Das disabled schaltet die Interaktionsmöglichkeiten aus und deaktiviert somit die Komponente.Ist das Eingabefeld ausserhalb eines Formulars platziert, kann das form eine Verknüpfung zu einem existierenden Formular herstellen. Im abgesendeten Formular dient die Eigenschaft name zur Identifizierung des Wertes im value-Attribut. Der Typ des Eingabefeldes – angegeben durch type – definiert, welche UI-Erscheinung das Input erhält und welche Werte zulässig sind. Als Standard-Typ ist text definiert, wodurch dieses Attribut optional ist. Mehr zu den für diese Arbeit wichtigen Typen ist im Unterkapitel Input-Typen mit Datalist-Unterstützung zu lesen. Die globale id dient bei den Eingabefeldern zusätzlich zur Verknüpfung mit einem Label-Element und somit einer besseren Accessibility.

Weiterhin existieren die zwei Attribute readonly und required Diese sind bei allen Typen – ausser range und color – definiert. Durch die Ergänzung der ersten Eigenschaft ist der Wert nicht mehr änderbar. Das Input bleibt aber im Verlauf der fokussierbaren Komponenten enthalten. Das required erzwingt eine Eingabe. Die Eigenschaften min, max und step unterstützen die Konfiguration der numerischen Typen [5]. Die ersten beiden begrenzen die Werte auf einen Bereich oder ein Intervall. Mit step lässt sich die Grösse eines Schrittes einstellen. Die textlichen Felder [6] besitzen die Attribute maxlength, minlength, pattern und size. Diese Texttypen zusammen mit number können durch placeholder einen Patzhaltertext erhalten. Die Min- und Max-Länge schränken die Textlänge der Eingabe ein. Die Vorgabe eines Regex-Musters im pattern-Attribut kann die Eingabe weiter eingrenzen. Das Formular validiert die Felder vor dem Senden anhand des Patterns und markiert fehlerhafte Eingaben als invalide. Gewisse Typen – wie z. B. url, tel und email – haben bereits ein Pattern hinterlegt. Mit size lässt sich die Grösse bzw. Anzahl sichtbarer Zeichen angeben. Weitere Informationen zum Styling eines Input-Feldes stehen im Unterkapitel CSS für Input-Felder.

Das Input besteht aus einem selbstschliessenden Tag. Die ARIA-Rolle ist vom Typ abhängig und ist einer Textbox, Combobox, Spinbutton, Slider, Searchbox, Telbox oder keiner speziellen Rolle zuzuordnen. In den hier erwähnten Möglichkeiten der Komponente existiert eine grossflächige Browserunterstützung. Die einzigen Ausnahmen beziehen sich auf die Typen week und month, welche im Firefox und Safari nicht funktionieren.

Input-Typen mit Datalist-Unterstützung

Bei den textuellen Typen [7] existieren text, search, number, email, url und tel. Diese Typen erscheinen mehr oder weniger als normales, einzeiliges Texteingabefeld. Die Ersten zwei der Auflistung verwalten einen Text ohne spezielle Anforderungen. Der Typ number dient zum Speichern der Werte als Zahlen und zeigt dies durch die Ergänzung zweier Buttons im UI-Feld. Die letzten drei Typen sind Textfelder, welche bereits ein passendes Pattern für E-Mail, URL oder Telefonnummer hinterlegt haben. Zudem zeigen diese Felder bei dynamischen Tastaturen ein der Situation angepasstes Layout [8]. Typen in der Kategorie Date-Time sind month, week, date, time und datetime-local.

Bei einer ungefähren Eingabe einer Zahl auf einem Intervall bietet sich range an. Im UI zeigt sich diese Komponente als Slider, wobei sich der Standardwert in der Mitte findet. Zur Festlegung der Limiten dienen min und max. Für eine Farbauswahl kann der Typ color zur Anwendung kommen. Die gängigen Browser zeigen nach dem Aufklappen Farbpaletten, welche sich aber in der Darstellung unterscheiden. Firefox beispielsweise greift auf die vom System gestellte Farbpalette zurück, wo Chromium-basierte Browser eine eigene bieten.

CSS für Input-Felder

Bei einem Input [9] bestehen mehrere Möglichkeiten, dieses umzugestalten. Es existieren eigene CSS-Pseudo-Klassen, wobei die folgende Aufzählung nur einen Ausschnitt aufzeigt.

• :enabled bzw. :disabled – reagiert auf das disabled-Attribut

• :read-write bzw. :read-only – reagiert auf das readonly-Attribut

• :valid bzw. :invalid – reagiert beim Abschicken des Formulars auf die Client-Side-Validität [10] des Felds

• :user-invalid – reagiert beim Verlassen des Inputs auf die Client-Side-Validität des Felds

• :in-range bzw. :out-of-range – reagiert auf das min- und max-Attribut

• :optional bzw. :required – reagiert auf das required-Attribut

• :blank – reagiert, wenn ein Feld leer ist

Weiterhin gibt es noch das Pseudo-Element ::placeholder, welches das Stylen des Platzhalters erlaubt. Das CSS-Property caret-color färbt den Cursor [11] in Inputs um. Im Gegensatz zur datalist und dem select lässt sich das normale Eingabefeld relativ gut designen.

[1] (contributors, 2023) [2] (contributors, 2024c) [3] (contributors, 2024a) [4] (contributors, 2024a) [5] date, month, week, time, datetime-local, number, range [6] text, search, url, tel, email, password [7] (contributors, 2024a) [8] z. B.: @ und . ist bei email immer sichtbar, oder bei tel sind die Zahlen besser dargestellt [9] (contributors, 2024b) [10] Einhaltung der Regeln für das Input – z. B. ein gegebenes pattern [11] blinkender Strich in einem Eingabefeld