Forms

Example

Hinweis: Pflichfelder sind mit einem *(Pflichtfeld) markiert.

Input *(Pflichtfeld) Helptext

Select *(Pflichtfeld) Bitte wählen Option1 Option2 Helptext

Frage

Antwort 1

Antwort 2

Frage

Ja

Nein

Back

Action

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="myInputField1936" 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="myInputField1936" type="text" aria-describedby="myInputField1936Help " name="myInputField1936">
        <small id="myInputField1936Help" class="formgroup__help">Helptext</small>
    </div>
<div class="form-group"> 
    <label for="mySelect1883" 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="mySelect1883" aria-describedby="mySelect1883Help " name="mySelect1883">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
    <small id="mySelect1883Help" 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="myCheckbox9300" name="myCheckbox9300">
                <label class="form-check-label" for="myCheckbox9300">Antwort 1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox7105" name="myCheckbox7105">
                <label class="form-check-label" for="myCheckbox7105">Antwort 2</label>
            </div>
    </fieldset>

    <fieldset >
        <legend >
                Frage
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox3932" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox3932">Ja</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox4702" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox4702">Nein</label>
            </div>
    </fieldset>
    <div class="form-actions">
        <div class="form-actions__left">
            
            <a href="#randomtarget1048" 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

Textfeld

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField2876" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField2876" type="text" name="myInputField2876">
    </div>
</form>
 

Select Bitte wählen Option1 Option2

<form class="form--base panel--heavy">
<div class="form-group"> 
    <label for="mySelect1676" class="form-label">
        Select        
    </label>
    <select class="form-control" id="mySelect1676" name="mySelect1676">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
</form>
 

Multiselect Bitte wählen Option1 Option2

<form class="form--base panel--heavy">
<div class="form-group"> 
    <label for="mySelect3220" class="form-label">
        Multiselect        
    </label>
    <select class="form-control" multiple id="mySelect3220" name="mySelect3220">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
</form>
 

Textarea

<form class="form--base panel--heavy">
    <div class="form-group"> 
        <label for="myTextarea934" class="form-label ">
            Textarea
        </label>
        <textarea class="form-control" id="myTextarea934" rows="3" name="myTextarea934"></textarea>
    </div>
</form>
 

Dateiupload

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField9475" class="form-label ">
            Dateiupload
        </label> 
        <input class="form-control" id="myInputField9475" type="file" name="myInputField9475">
    </div>
</form>
 

Time

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField7250" class="form-label ">
            Time
        </label> 
        <input class="form-control" id="myInputField7250" type="time" name="myInputField7250">
    </div>
</form>
 

Number

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField5886" class="form-label ">
            Number
        </label> 
        <input class="form-control" id="myInputField5886" type="number" name="myInputField5886">
    </div>
</form>
 

Url

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField7716" class="form-label ">
            Url
        </label> 
        <input class="form-control" id="myInputField7716" type="url" name="myInputField7716">
    </div>
</form>
 

Datepicker native (input[type=date])

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField7736" class="form-label ">
            Datepicker native (input[type=date])
        </label> 
        <input class="form-control" id="myInputField7736" type="date" name="myInputField7736">
    </div>
</form>
 

Datepicker with flatpickr.js (input.datepicker)

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField8979" class="form-label ">
            Datepicker with flatpickr.js (input.datepicker)
        </label> 
        <input class="form-control datepicker" id="myInputField8979" type="text" name="myInputField8979">
    </div>
</form>
 

Readonly

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField9443" class="form-label ">
            Readonly
        </label> 
        <input class="form-control" readonly id="myInputField9443" type="text" value="Dieser Text ist nicht zu ändern" name="myInputField9443">
    </div>
</form>
 

Required *(Pflichtfeld)

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField8239" 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="myInputField8239" type="text" name="myInputField8239">
    </div>
</form>
 

Input as plaintext

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField8494" class="form-label ">
            Input as plaintext
        </label> 
        <input class="form-control-plaintext" readonly id="myInputField8494" type="text" value="Dieser Wert sieht aus wie Plaintext" name="myInputField8494">
    </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

Checkbox label

Checkbox label

Disabled checkbox label

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.

Checkbox label

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

    <fieldset >
        <legend >
                Checkboxes legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox5764" name="myCheckbox5764">
                <label class="form-check-label" for="myCheckbox5764">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox9777" name="myCheckbox9777">
                <label class="form-check-label" for="myCheckbox9777">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox8145" name="myCheckbox8145">
                <label class="form-check-label" for="myCheckbox8145">Disabled checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox7612" name="myCheckbox7612">
                <label class="form-check-label" for="myCheckbox7612">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="myCheckbox9544" name="myCheckbox9544">
                <label class="form-check-label" for="myCheckbox9544">Checkbox label</label>
            </div>
    </fieldset>
</form>
 

Radio button legend

Radio label

Radio label

Disabled radio label

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.

Radio label

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

    <fieldset >
        <legend >
                Radio button legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox1007" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox1007">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox5383" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox5383">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" disabled id="myCheckbox4335" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox4335">Disabled radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox1218" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox1218">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="myCheckbox4018" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox4018">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

Checkbox label

Checkbox label

Disabled checkbox label

<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="myCheckbox9577" name="myCheckbox9577">
                <label class="form-check-label" for="myCheckbox9577">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox3865" name="myCheckbox3865">
                <label class="form-check-label" for="myCheckbox3865">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox7212" name="myCheckbox7212">
                <label class="form-check-label" for="myCheckbox7212">Disabled checkbox label</label>
            </div>
    </fieldset>
</form>
 

Inline radio buttons legend

Radio button label

Radio button label

Disabled Radio button label

<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="myCheckbox462" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox462">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox7885" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox7885">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" disabled id="myCheckbox2629" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox2629">Disabled Radio button label</label>
            </div>
    </fieldset>
</form>
 

Toggle switch

Settings

Receive Notifications

Receive SMS

Receive call (disabled)

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

    <fieldset >
        <legend >
                Settings
        </legend>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-2571" id="toggle-switch-2571" 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-2571">Receive Notifications</label>
        </div>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-3556" id="toggle-switch-3556" 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-3556">Receive SMS</label>
        </div>

        <div class="toggle-switch form-check">
          <input type="checkbox" name="toggle-switch-input-5375" id="toggle-switch-5375" 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-5375">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.

Passwort We never share your email with anyone else.

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField9912" class="form-label ">
            Passwort
        </label> 
        <input class="form-control" id="myInputField9912" type="password" aria-describedby="myInputField9912Help " placeholder="Geben Sie hier Ihr passwort ein" name="myInputField9912">
        <small id="myInputField9912Help" 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.

Textfeld

Bitte füllen Sie dieses Feld aus.

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField5792" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control is-invalid" id="myInputField5792" type="text" aria-describedby="myInputField5792Invalid " name="myInputField5792">
        <div class="message message--error" id="myInputField5792Invalid">
        Bitte füllen Sie dieses Feld aus.    
</div>
    </div>
</form>
 

Textfeld

Dieses Feld ist richtig ausgefüllt.

<form class="form--base panel--heavy">
   <div class="form-group">
        <label for="myInputField6173" class="form-label ">
            Textfeld
        </label> 
        <input class="form-control is-valid" id="myInputField6173" type="text" aria-describedby="myInputField6173Valid " value="Ich bin ein Text" name="myInputField6173">
        <div class="message message--success" id="myInputField6173Valid">
        Dieses Feld ist richtig ausgefüllt.    
</div>
    </div>
</form>
 

Checkbox

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="myCheckbox1309Invalid " id="myCheckbox1309" name="myCheckbox1309">
                <label class="form-check-label" for="myCheckbox1309">Checkbox</label>
                <div id="myCheckbox1309Invalid" class="message message--error">Bitte füllen Sie dieses Feld aus.</div>
            </div>
</form>
 

Checkbox

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="myCheckbox7700Valid " id="myCheckbox7700" name="myCheckbox7700">
                <label class="form-check-label" for="myCheckbox7700">Checkbox</label>
                <div id="myCheckbox7700Valid" class="message message--success">Dieses Feld ist richtig ausgefüllt.</div>
            </div>
</form>
 

Horizontale Elemente

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

Textfeld

Auswahlliste Bitte wählen Option1 Option2

Checkbox

Button

<form class="form--base panel--heavy">
<div class="form-group form-group form-group--inline">   <div class="form-group">
        <label for="myInputField7998" class="form-label aural">
            Textfeld
        </label> 
        <input class="form-control" id="myInputField7998" type="text" name="myInputField7998">
    </div>
<div class="form-group"> 
    <label for="mySelect9769" class="form-label aural">
        Auswahlliste        
    </label>
    <select class="form-control" id="mySelect9769" name="mySelect9769">
        <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="myCheckbox5249" name="myCheckbox5249">
                <label class="form-check-label" for="myCheckbox5249">Checkbox</label>
            </div>
<button type="submit" class="button">Button</button>
</div></form>
 

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

Textfeld

Textfeld

Button

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