Inaktive Formularelemente

Verwendung

Formularelemente können in der Regel einen inaktiven Zustand (disabled) haben, sofern dies nicht beim jeweiligen Element anders spezifiziert ist. Elemente und Komponenten, die einen disabled-Zustand haben können sind:

alle Formen von input
select, option, optgroup
button

Inaktive Elemente inklusive ihrer Labels werden zwar in der Nutzerschnittstelle angezeigt, sind aber optisch deutlich zurückgenommenen gestaltet und reagieren auf keine Interaktion. Bei :hover über inaktive Elemente wird der Maus-Cursor auf „not-allowed“ geändert.

Inaktive Komponenten

Laut der HTML-Spezifikation können auch gesamte Fieldsets auf disabled gesetzt werden; allerdings wurde dies von Internet Explorer nicht unterstützt und enthaltene Formularelemente blieben dort weiter aktiv. Eine mögliche Lösung war hier, alle enthaltenen Formularelemente ebenfalls mit einem disabled-Attribut zu versehen, wenn ein ganzes Fieldest inaktiv sein sollte.

Im Zoll-Portal wurden darüber hinaus Teaser-Kacheln fachlich und inhaltlich benötigt, die zwar angezeigt werden, aber ein inaktives Design haben und keine klickbaren Links enthalten.

Inaktive Formular-Elemente mit disabled-Attribut dürfen keine Pflichtfelder sein und somit auch kein required-Attribut haben.

Andere interaktive Elemente wie Links können keinen inaktiven Zustand erhalten, in solchen Fällen muss der Link vom verlinkten Text entfernt werden.

Tooltips

Sofern technisch möglich sollten inaktive Formularfelder keine dann ebenso inaktiven Tooltip-Buttons aufweisen. Tooltips sollen erst dargestellt werden, wenn Felder durch Änderungen oder Eingaben an anderer Stelle von inaktiv auf aktiv gesetzt werden.

Readonly-Elemente

Nur darstellende Formularelemente, bei denen das readonly-Attribut zulässig ist, erhalten neben der optisch zurückgenommenen Gestaltung auch einen Maus-Cursor vom Typ not-allowed und reagieren auf keine Eingaben. Im Gegensatz zu disabled-Feldern sind sie aber Bestandteil der Tab-Reihenfolge. Sie sind somit fokussierbar und erhalten eine eigenständige Gestaltung, die ihren Zweck visualisiert.