Components Textfelder

Textfelder Beschreibung

  • 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.
  • Bei Textfeldern, die sich auf den Nutzer beziehen, muss das autocomplete-Attribut passen vergeben sein, um die Barrierefreiheit sicherzustellen.
  • 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.

Weitere Informationen unter "Patterns-Formulare".

Wichtiger Hinweis

Alle hier dargestellten Container und Fieldsets Beispiele, sind nur Anschauungen wie das HTML-Markup bei Erstellung von Komponenten aussehen sollte.
Aus diesen Beispielen sollen einzelne Komponenten wie Datum, Uhrzeit, Datum-Bereich, Uhrzeit-Bereich, Straße und Ort, Postleitzahl und Ort, Postfach und Postfach Postleitzahl gebaut werden

Diese können dann eine gemeinsame Fehlermeldungen behalten und weitere Anforderungen.

Barrierefreiheit Info

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

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

Textfelder Zustände

Standard

Selected Keyboard Focus

5 oder mehr Zahlen



    
    
5 oder mehr Zahlen

Disabled

Disabled

Required

Hint

5 oder mehr Zahlen



    
    
5 oder mehr Zahlen

Error

Sorry, that username's taken. Try another? 

    
    
    Sorry, that username's taken. Try another?

Mit Platzhalter

Passwort

Uhrzeit

Suche

Inline Darstellung der Formularelemente

Komponenteneingaben dürfen nur für semantisch zusammenhängende Felder verwendet werden. Dazu gehören: Datum, Uhrzeit, Datum-Bereich, Uhrzeit-Bereich, Straße und Ort, Postleitzahl und Ort, Postfach und Postfach Postleitzahl.

Die Elemente in der inline Darstellung haben keinen Abstand nach unten. Die Zeile selbst besitzt einen Abstand nach unten!

In der mobilen Darstellung ( >576px), wegen bessere Darstellung, werden die Elemente Blockweise Dargestellt und bekommen abstand nach unten. Dafür besitzen die FormGroup auch eine "col-sm-x" CSS-Klasse

Bitte beachtet dass zusammenhängende Formelemente in einem Fieldset darzustellelt werden!

Info

Bitte beachtet, dass zusammenhängende elemente in einen Fieldset implementiert werden müssen!

Container

Bsp. 1

Bsp. 1 mit Fehlermeldung

Eine Fehlermeldung
Eine Fehlermeldung 

    

        

            
            
            Eine Fehlermeldung
        

    

    

        

            
            
            Eine Fehlermeldung

Date Input

Validation_Required, Zweistellige Eingabe für den Tag
Validation_Required, Zweistellige Eingabe für den Monat
Validation_Required, Vierstellige Eingabe für das Jahr
Bitte geben Sie einen Wert ein 
    

        

            
                
            
            
            

                

                    
                    Validation_Required, Zweistellige Eingabe für den Tag
                    
                

                

                    
                    Validation_Required, Zweistellige Eingabe für den Monat
                    
                

                

                    
                    Validation_Required, Vierstellige Eingabe für das Jahr
                    
                

            


            

                Bitte geben Sie einen Wert ein

OSI Hilfe Dialog