Components Text-Area Multiline

  • Bei Standard-Formularen werden grundsätzlich alle Labels oberhalb der Eingabeelemente platziert.
  • Es wird kein Platzhaltertext innerhalb des Eingabefelds benutzt. Falls eine kurze Hilfe sinnvoll erscheint, sollte ein Hilfstext (Hint) unter dem Label hinzugefügt werden.
  • Wenn die Länge der noch verfügbaren Zeichen eine bestimmte Anzahl unterschreitet, sollte die Restanzahl der Zeichen unterhalt der Eingabebox angezeigt werden. Wenn die Anzahl der verfügbaren Zeichen größer ist, sollte dieser Hinweis nicht angezeigt werden.
  • Es werden nur optionale Elemente gekennzeichnet. Alle anderen Felder sind Pflichtfelder.
  • Die Anzahl der optionalen Felder sollte so gering wie möglich gehalten werden. Wird dieses Feld wirklich benötigt?
  • Die Auszeichnung " - Opional", ein zusätzliche Hilfstext (Hint unter dem Label) und die Fehlermeldung werden immer in Arial 14px, Regular dargestellt.
  • Der Text " - Optional" und der Hilfstext werden in Grau #767676 und die Fehlermeldung in Rot #E10019 angezeigt.
  • Für kombinierte Eingaben (z.B. Tag, Monat, Jahr) gibt es nur eine gemeinsame Fehlerkennzeichnung.
  • Der Fehlertext selbst kann direkt auf das Problem hinweisen, z.B. "Das Jahr muss in der Vergangenheit liegen" und roter Rahmen um das Feld "Jahr".
  • Im Fehlerfalle wird dem gesamte Block, bestehend aus Label, Hint, Eingabeelement und Fehlermeldung, ein roter, vertikaler Balken mit 5px Breite im Abstand (Padding) von 8px vorangestellt. Der Block rück dadurch nach rechts.
  • Mehrzeilige Textfelder bestehen aus mindestens drei Textzeilen. Weitere Informationen unter "Patterns-Formulare".
Barrierefreiheit Info

Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!

Die Anzeige über die verbleibenden Zeichen müssen ebenso via aria-describedby Attribut mit dem Input verlinkt werden!

Example:
<input aria-describedby="xxx">

Die Anzeige über die verbleibenden Zeichen muss mit der Rolle role="alert" versehen werden, damit Screenreader die Änderung vorlesen!

Example:
<div role="alert">Sie haben noch 200 Zeichen übrig</div>

Standard mit Label

Disabled

Sie haben noch 200 Zeichen übrig

    
    
    
Sie haben noch 200 Zeichen übrig

Optional mit Label

Standard mit Hint

5 oder mehr Zeichen

    
    
5 oder mehr Zeichen

Error

Die Anzahl der verbleibenden Zeichen wird nicht angezeigt. Sobald der Benutzer wieder tippt, verschwindet der Fehlermeldungstext und die Anzahl der verbleibenden Zeichen erscheint wieder.

In diesem Fall soll der Benutzername Error bereits vergeben sein.

Sorry, that username's taken. Try another? 

    
    
    Sorry, that username's taken. Try another?

OSI Hilfe Dialog