Forms

Das Basis-Layout einer Gruppe von Eingabefeldern wird mit dem Grund-Markup bereitgestellt. Dieses ist immer zu verwenden und gibt eine grundlegende Formatierung und Ausrichtung der Elemente vor. Dieses Grund-Markup kann mit beliebigen Elementen aus den nachfolgenden Beispielen gefüllt werden.

Example

Hinweis: Pflichfelder sind mit einem (Pflichtfeld) markiert.

Helptext
Helptext
Frage
Frage
Back

Optionaler Footer

<form class="form--base panel--heavy">
    <p class="form-description">
        Hinweis: Pflichfelder sind mit einem  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span> markiert.
    </p>
   <div class="form-group">
        <label for="myInputField3874" class="form-label ">
            Input  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField3874" type="text" aria-describedby="myInputField3874Help " name="myInputField3874">
        <small id="myInputField3874Help" class="formgroup__help">Helptext</small>
    </div>
<div class="form-group"> 
    <label for="mySelect4395" class="form-label">
        Select  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>        
    </label>
    <select class="form-control" required aria-required="true" id="mySelect4395" aria-describedby="mySelect4395Help " name="mySelect4395">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
    <small id="mySelect4395Help" class="formgroup__help">Helptext</small>
</div> 

    <fieldset >
        <legend >
                Frage
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox9558" name="myCheckbox9558">
                <label class="form-check-label" for="myCheckbox9558">Antwort 1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox8482" name="myCheckbox8482">
                <label class="form-check-label" for="myCheckbox8482">Antwort 2</label>
            </div>
    </fieldset>

    <fieldset >
        <legend >
                Frage
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox7220" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox7220">Ja</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox8536" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox8536">Nein</label>
            </div>
    </fieldset>
    <div class="form-actions">
        <div class="form-actions__left">
            
            <a href="#randomtarget8323" class="link--back">Back</a>
        </div>
        <div class="form-actions__right">
            
            <button type="submit" class="button">Action</button>
        </div>
    </div>
    <div class="form__footer panel__footer panel--heavy">
        <p>Optionaler Footer</p>
    </div>
</form>

Form elements

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField4511" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField4511" type="text" name="myInputField4511">
    </div>
</form>
 
<form class="form--base panel--heavy">
<div class="form-group"> 
    <label for="mySelect2708" class="form-label">
        Select        
    </label>
    <select class="form-control" id="mySelect2708" name="mySelect2708">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
</form>
 
<form class="form--base panel--heavy">
<div class="form-group"> 
    <label for="mySelect1823" class="form-label">
        Multiselect        
    </label>
    <select class="form-control" multiple id="mySelect1823" name="mySelect1823">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
</form>
 
<form class="form--base panel--heavy">
    <div class="form-group"> 
        <label for="myTextarea1392" class="form-label ">
            Textarea
        </label>
        <textarea class="form-control" id="myTextarea1392" rows="3" name="myTextarea1392"></textarea>
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField8302" class="form-label ">
            Dateiupload
        </label> 
        <input class="form-control" id="myInputField8302" type="file" name="myInputField8302">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField4963" class="form-label ">
            Time
        </label> 
        <input class="form-control" id="myInputField4963" type="time" name="myInputField4963">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField795" class="form-label ">
            Number
        </label> 
        <input class="form-control" id="myInputField795" type="number" name="myInputField795">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField7883" class="form-label ">
            Url
        </label> 
        <input class="form-control" id="myInputField7883" type="url" name="myInputField7883">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField6319" class="form-label ">
            Datepicker native (input[type=date])
        </label> 
        <input class="form-control" id="myInputField6319" type="date" name="myInputField6319">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField2189" class="form-label ">
            Datepicker with flatpickr.js (input.datepicker)
        </label> 
        <input class="form-control datepicker" id="myInputField2189" type="text" name="myInputField2189">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField2592" class="form-label ">
            Readonly
        </label> 
        <input class="form-control" readonly id="myInputField2592" type="text" value="Dieser Text ist nicht zu ändern" name="myInputField2592">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField6246" class="form-label ">
            Required  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField6246" type="text" name="myInputField6246">
    </div>
</form>
 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField8571" class="form-label ">
            Input as plaintext
        </label> 
        <input class="form-control-plaintext" readonly id="myInputField8571" type="text" value="Dieser Wert sieht aus wie Plaintext" name="myInputField8571">
    </div>
</form>

Checkboxes und Radio buttons

Standardmäßig werden Checkboxen und Radios untereinander angezeigt und in der Wrapper-Klasse .form-check gekapselt. Das Inputfeld hat die Klasse .form-check-input. Das Label hat die Klasse .form-check-label.

Barrierefreiheit: Bitte beachten Sie bei Eingabegruppen die Verwendung von fieldset und legend. Siehe auch: Barrierefreies Webdesign - Mit FIELDSET und LEGEND zu beschreibenden Formularbeschriftungen

Checkboxes legend 
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Checkboxes legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox3181" name="myCheckbox3181">
                <label class="form-check-label" for="myCheckbox3181">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox3571" name="myCheckbox3571">
                <label class="form-check-label" for="myCheckbox3571">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox8646" name="myCheckbox8646">
                <label class="form-check-label" for="myCheckbox8646">Disabled checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox8918" name="myCheckbox8918">
                <label class="form-check-label" for="myCheckbox8918">Checkbox label with a lot of text Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox4572" name="myCheckbox4572">
                <label class="form-check-label" for="myCheckbox4572">Checkbox label</label>
            </div>
    </fieldset>
</form>
Radio button legend 
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Radio button legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox2456" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox2456">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox4768" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox4768">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" disabled id="myCheckbox813" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox813">Disabled radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox8533" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox8533">Radio label with a lot of text Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox8780" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox8780">Radio label</label>
            </div>
    </fieldset>
</form>

Inline Checkboxen: Checkboxen und Radios können mit der Klasse .form-check-inline horizontal gruppiert werden.

Inline checkboxes legend 
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Inline checkboxes legend
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox7999" name="myCheckbox7999">
                <label class="form-check-label" for="myCheckbox7999">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox5644" name="myCheckbox5644">
                <label class="form-check-label" for="myCheckbox5644">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox6634" name="myCheckbox6634">
                <label class="form-check-label" for="myCheckbox6634">Disabled checkbox label</label>
            </div>
    </fieldset>
</form>
Inline radio buttons legend 
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Inline radio buttons legend
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox145" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox145">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox6073" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox6073">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" disabled id="myCheckbox3671" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox3671">Disabled Radio button label</label>
            </div>
    </fieldset>
</form>

Toggle switch

Bitte beachten Sie
Toggle Switches sind An- und Ausschalter, die unmittelbar eine Aktion auslösen, ohne dass der Benutzer oder die Benutzerin auf „Speichern“ oder „Absenden“ klicken muss, um den neuen Zustand zu übernehmen. Toggle Switches sind zwar technisch Checkboxen sollten aber nicht als solche verwendet werden. Für weitere Informationen empfehlen wir die Toggle-Switch-Richtlinien der Nielsen Norman Group.

Settings 
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Settings
        </legend>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-6534" id="toggle-switch-6534" aria-label="Toggle Switch" class="toggle-switch__input" checked="checked">
          <span class="toggle-switch__display" hidden>
            <i class="bicon bicon-check toggle-switch__icon toggle-switch__icon--on" aria-hidden="true"></i>
            <i class="bicon bicon-times toggle-switch__icon toggle-switch__icon--off" aria-hidden="true"></i>
          </span>
          <label class="toggle-switch__label" for="toggle-switch-6534">Receive Notifications</label>
        </div>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-6880" id="toggle-switch-6880" aria-label="Toggle Switch" class="toggle-switch__input">
          <span class="toggle-switch__display" hidden>
            <i class="bicon bicon-check toggle-switch__icon toggle-switch__icon--on" aria-hidden="true"></i>
            <i class="bicon bicon-times toggle-switch__icon toggle-switch__icon--off" aria-hidden="true"></i>
          </span>
          <label class="toggle-switch__label" for="toggle-switch-6880">Receive SMS</label>
        </div>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-3681" id="toggle-switch-3681" aria-label="Toggle Switch" class="toggle-switch__input" disabled="disabled">
          <span class="toggle-switch__display" hidden>
            <i class="bicon bicon-check toggle-switch__icon toggle-switch__icon--on" aria-hidden="true"></i>
            <i class="bicon bicon-times toggle-switch__icon toggle-switch__icon--off" aria-hidden="true"></i>
          </span>
          <label class="toggle-switch__label" for="toggle-switch-3681">Receive call (disabled)</label>
        </div>
    </fieldset>
</form>

Hilfetexte

Der Hilfetext hat die Klasse .formgroup__help. Standardmäßig wird er unterhalb des Eingabefeldes angezeigt. Für Screenreader wird das Eingabeelement über das Attribut aria-describedby mit dem id des Beschreibungstexte verknüpft.

We never share your email with anyone else. 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField9351" class="form-label ">
            Passwort
        </label> 
        <input class="form-control" id="myInputField9351" type="password" aria-describedby="myInputField9351Help " placeholder="Geben Sie hier Ihr passwort ein" name="myInputField9351">
        <small id="myInputField9351Help" class="formgroup__help">We never share your email with anyone else.</small>
    </div>
</form>

Validierung

Über die Klassen .is-invalid und .is-valid können Elemente farblich gekennzeichnet werden.
Ein zusätzlicher Fehlertext mit der Klasse .message.message-error bzw. .message.message-success wird unterhalb des invaliden Elementes angezeigt.

Bitte füllen Sie dieses Feld aus. 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField1715" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control is-invalid" id="myInputField1715" type="text" aria-describedby="myInputField1715Invalid " name="myInputField1715">
        <div class="message message--error" id="myInputField1715Invalid">
        Bitte füllen Sie dieses Feld aus.    
</div>
    </div>
</form>
Dieses Feld ist richtig ausgefüllt. 
<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField1184" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control is-valid" id="myInputField1184" type="text" aria-describedby="myInputField1184Valid " value="Ich bin ein Text" name="myInputField1184">
        <div class="message message--success" id="myInputField1184Valid">
        Dieses Feld ist richtig ausgefüllt.    
</div>
    </div>
</form>
Bitte füllen Sie dieses Feld aus.
<form class="form--base panel--heavy">
            <div class="form-check">
                <input class="form-check-input is-invalid" type="checkbox" aria-describedby="myCheckbox2353Invalid " id="myCheckbox2353" name="myCheckbox2353">
                <label class="form-check-label" for="myCheckbox2353">Checkbox</label>
                <div id="myCheckbox2353Invalid" class="message message--error">Bitte füllen Sie dieses Feld aus.</div>
            </div>
</form>
Dieses Feld ist richtig ausgefüllt.
<form class="form--base panel--heavy">
            <div class="form-check">
                <input class="form-check-input is-valid" type="checkbox" aria-describedby="myCheckbox2036Valid " id="myCheckbox2036" name="myCheckbox2036">
                <label class="form-check-label" for="myCheckbox2036">Checkbox</label>
                <div id="myCheckbox2036Valid" class="message message--success">Dieses Feld ist richtig ausgefüllt.</div>
            </div>
</form>

Horizontale Elemente

Horizontale Darstellung von Elementen mit .form-group--inline.

<form class="form--base panel--heavy">
<div class="form-group form-group form-group--inline">   <div class="form-group">
        <label for="myInputField3543" class="form-label aural">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField3543" type="text" name="myInputField3543">
    </div>
<div class="form-group"> 
    <label for="mySelect4995" class="form-label aural">
        Auswahlliste        
    </label>
    <select class="form-control" id="mySelect4995" name="mySelect4995">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox7030" name="myCheckbox7030">
                <label class="form-check-label" for="myCheckbox7030">Checkbox</label>
            </div>
<button type="submit" class="button">Button</button>
</div></form>

.form-group--inline .fullspace .align-bottom

<form class="form--base panel--heavy">
<div class="form-group form-group form-group--inline fullspace align-bottom">   <div class="form-group">
        <label for="myInputField3113" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField3113" type="text" name="myInputField3113">
    </div>
   <div class="form-group">
        <label for="myInputField4095" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField4095" type="text" name="myInputField4095">
    </div>
<button type="submit" class="button">Button</button>
</div></form>