Formulare

Formulare bilden eine wichtige Schnittstelle zwischen Anwendung und Nutzer.

Textfelder bestehen aus einem Label / Placeholder und einer 1px Kontur. Die Breite kann variiert werden. Textfelder werden passend deklariert (beispielsweise Zahlen, Datum oder Passwörter). So wird dem Nutzer - insbesondere auf mobilen Endgeräten - mit der passenden virtuellen Tastatur die Eingabe erleichtert. Textfelder können mit Icons und Beschreibungen kombiniert werden.

Im Bereich von Formularen ist auf gute Strutur und Übersicht für den Nutzer zu achten.

Default

Standard Textfeld mit Placeholder.

Focus

Standard Textfeld im Focus, dieser wird durch die primäre Farbe in 50% Transparenz optisch dargestellt.

Border / Radius: 1px   #dee2e6 / 2px
Innenabstand: 8px/16px
Label/Text: Roboto 14px Regular   #495057
Placeholder/Text: Roboto 14px Regular   #868e96

Label / Placeholder / Info

Die Bezeichnung von Textfeldern erfolgt über Labels oder Placeholder-Texte.
Jedes Textfeld kann optional mit einem Beschreibungstext versehen werden.
Längere Formulare (Input-Felder) sollten immer mit Labels statt Placeholdern arbeiten.

Ihr Passwort muss 8-20 Zeichen lang sein.
Ihr Passwort muss 8-20 Zeichen lang sein.
Pflichtfelder

Textfelder werden mit einem (*) als Pflichtfeld gekennzeichnet. Am Ende des Formulars ist anzugeben, dass Textfelder die mit einem Sternchen gekennzeichnet sind, Pflichtangaben sind.

Optional

Optionale Textfelder werden mit (Optional) gekennzeichnet.

Nur Lesen

Ausgegraute Felder, keine Eingabe Möglich.

Validieren

Textfelder werden mit Ereignis Farben gekennzeichnet.
Optional kann hier eine Beschreibung angegeben werden.

Das Passwort ist unsicher!
Das Passwort ist sicher!
Icons

Begleitend können Icons in der größe 24x24px angegeben werden.

Select

Auswahllisten mit fest definierten Werten.


    //Text Input
    

    //Text Input (Options)
    
    
    Ihr Passwort muss 8-20 Zeichen lang sein.

    //Readonly Input
    

    //Validieren
    
    
    Das Passwort ist unsicher!

    
    
    Das Passwort ist sicher!

    //Icons
    
    

        

            

                
            

        

        
    


    //Icons Button
    

        

            

                
            

        

        
    


    //Selectbox
 

Checkboxes und radios

Checkbox
Radio

    //Checkbox
    

        
        
    


    

        
        
    



    //Radio



Toogle Switch

Label 

        //default
        

        //label
        

            

                
            

            

                Label
            

        


        //icon



Range Slider

 

    //default
    
    

    //steps



Form Sizing

Variable größen über .form-control-lg and .form-control-sm.

Standard Formular

We'll never share your email with anyone else. 

    

        

            
            
            We'll never share your email with anyone else.

Formular Grid

Form controls

Horizontales Formular

Radios
Checkbox

    

        

            
            

                
            

        

        

            
            

                
            

        

        

            

                Radios
                

                    

                        
                        
                    


                    

                        
                        
                    


                    

                        
                        
                    

                

            

        

        

            
Checkbox

Validieren

Invalid Feedback text
Invalid Feedback text
Invalid Feedback text
Invalid Feedback text

    

        

            
            
            
Invalid Feedback text

        


        

            
            
        


        

            
            
        

        

            
            
            
Invalid Feedback text

        


        

            
            
Invalid Feedback text

        


        

            
            
            
Invalid Feedback text

Upload Input

Input Buttons

Für mehr Übersicht können Formulare in einzelne Sektionen unterteilt werden. Mithilfe der Navigation können die einzelnen Sektionen durchlaufen werden. Multi-Steps basiert auf dem Plugin jQuery Stepy“ .

Registrieren

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam assumenda delectus dignissimosm ullam voluptates.

Standort

Consectetur adipisicing elit. Cum debitis ea eius error eveniet facilis ipsam quia ratione repellendus voluptates?

Abschließen
Vielen Dank

Consectetur adipisicing elit. Cum debitis ea eius error eveniet facilis ipsam quia ratione repellendus voluptates?


    

        

            

                

                    
Registrieren

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam assumenda delectus dignissimosm ullam voluptates.

                    

                        

                            

                                

                                    
                                    
                                

                                

                                    
                                    
                                

                            

                        

                    

                


                

                    
Standort

                    
Consectetur adipisicing elit. Cum debitis ea eius error eveniet facilis ipsam quia ratione repellendus voluptates?

                    

                        

                            
                        

                        

                            
                        

                    

                


                

                    
Abschließen

                    
Vielen Dank

                    
Consectetur adipisicing elit. Cum debitis ea eius error eveniet facilis ipsam quia ratione repellendus voluptates?

                


                


                

                    

                        
                    

                    

                        
                        
                    

                

            

        

    



    


    ------------------
    OPTIONS
    ------------------

    back:        undefined  // Callback before the backward action.
    block:       false      // Block the next step if the current is invalid.
    description: false      // Choose if the descriptions of the titles will be showed.
    duration:    0          // Duration of the transition between steps in ms.
    enter:       true       // Enables the enter key to change to the next step.
    errorImage:  false      // If an error occurs, a image is showed in the title of the corresponding step.
    finish:      undefined  // Callback before the finish action.
    finishButto: true       // Include the button with class called '.finish' into the last step.
    header:      true       // Creates a header with title and description.
    ignore:      ''         // Choose the fields to be ignored on validation.
    legend:      false      // Choose if the legends of the steps will be showed.
    next:        undefined  // Callback before the forward action.
    select:      undefined  // Callback executed when the step is shown.
    titleClick:  true       // Active the back and next action in the titles.
    titleTarget: undefined  // Choose the place where titles will be placed.
    transition:  'hide'     // Use transition between steps ('hide', 'fade' or 'slide').
    validate:    undefined  // Callback to each field of each step.