Inhaltsbereich Navigation Navigation Fußzeile

Select mit Textfeld

Verwendung

Kombinierte Felder aus Select und Input Text sind zwei eigenständige Felder, die funktional zusammengehören und optisch als eine Einheit wirken sollen. Nachdem beide Felder befüllt sind bilden sie einen gemeinsamen Wert.

Dabei dient das Auswahl-Element vom Typ select der Auswahl eines Wertes aus einer feststehenden Wertemenge, wo die Nutzenden sich in einem Dropdown zwischen mehreren möglichen Werten entscheiden sollen. In diesem Element kann eine Option vorausgewählt werden, wenn diese mit hoher Wahrscheinlichkeit zutreffend ist, wie zum Beispiel <option value="de" selected>DE</option> in einer Länderauswahl. In diesem Fall ist es sinnvoll, die vorausgewählte Option an den Beginn der ansonsten grundsätzlich alphabetisch oder numerisch sortierten Liste der Optionen zu stellen.

Das unmittelbar anschließende Eingabefeld vom Typ input type="text" dient der Eingabe von alphanumerischen Zeichenfolgen, inklusive der alleinigen Eingabe von Zahlen. Eingabefelder, die eine eindeutig bestimmbare Zeichenmenge benötigen, sollten wenn möglich mittels fester Breiten so angelegt werden, dass sie die Breite der einzugebenden Daten zeigen.

  • Sinnvoll ist der Einsatz dieser Komponente bei der USt-IdNr. oder der Wirtschaftsidentifikationsnummer.

  • Nicht sinnvoll ist der Einsatz dieser Komponente, wenn eine hohe Wahrscheinlichkeit besteht, dass Nutzende den kombinierten Wert als Ganzes aus anderen Quellen (Passwort-Manager, Dateien) kopieren und einfügen. Dies sind zum Beispiel IBAN, Kreditkarten o.ä. und Ländervorwahlen (+49).

Beschriftung

Beispiel einer Umsatzsteuer-Identifikationsnummer, aufgeteilt in das Select für das Länderkürzel und das Freitextfeld für die folgenden Ziffern.

Die beiden Bestandteile der Komponente verfügen über eine gemeinsame sichtbare Beschriftung, die als gruppierendes Element fungiert. Darüber hinaus verfügen beide Elemente über visuell versteckte Beschriftungen zur eindeutigen Identifizierung, die wir im Tab „Code“ dokumentieren.

Wenn kein ausreichender Platz für eine sichtbare Beschriftung zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.

Tooltips

Die Komponente kann ein zugeordnetes Tooltip erhalten, das entweder Bestandteil der Feldbeschriftung ist, oder programmatisch verknüpft nach dem Formularelement steht.

Inaktive Elemente

Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Daten oder Vorauswahlen.

Readonly-Select sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt. Daher müssen die Daten im readonly-Zustand in einem gemeinsamen Textfeld mit readonly-Attribut dargestellt werden.

Do’s and Dont’s

So:

  • In der Regel standardisierte Optionen wie z. B. Ländercodes zur Auswahl
  • Dem Inhalt entsprechende Sortierung der Optionen
  • Eine Vorbelegung, die der wahrscheinlichsten Auswahl entspricht ("selected"-Attribut)

So nicht:

  • Fließtexte als Optionen
  • Sortierung entspricht nicht der natürlichen Suchreihenfolge
  • Formulare nicht absenden, wenn sich der Wert des Select ändert