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
<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="myInputField7574" 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="myInputField7574" type="text" aria-describedby="myInputField7574Help " name="myInputField7574">
<small id="myInputField7574Help" class="formgroup__help">Helptext</small>
</div>
<div class="form-group">
<label for="mySelect8406" 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="mySelect8406" aria-describedby="mySelect8406Help " name="mySelect8406">
<option value="">Bitte wählen</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<small id="mySelect8406Help" 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="myCheckbox336" name="myCheckbox336">
<label class="form-check-label" for="myCheckbox336">Antwort 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="myCheckbox8647" name="myCheckbox8647">
<label class="form-check-label" for="myCheckbox8647">Antwort 2</label>
</div>
</fieldset>
<fieldset >
<legend >
Frage
</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="myCheckbox9599" name="exampleRadios1">
<label class="form-check-label" for="myCheckbox9599">Ja</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="myCheckbox5382" name="exampleRadios1">
<label class="form-check-label" for="myCheckbox5382">Nein</label>
</div>
</fieldset>
<div class="form-actions">
<div class="form-actions__left">
<a href="#randomtarget5805" 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="myInputField2326" class="form-label ">
Textfeld
</label>
<input class="form-control" id="myInputField2326" type="text" name="myInputField2326">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="mySelect7646" class="form-label">
Select
</label>
<select class="form-control" id="mySelect7646" name="mySelect7646">
<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="mySelect7808" class="form-label">
Multiselect
</label>
<select class="form-control" multiple id="mySelect7808" name="mySelect7808">
<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="myTextarea3921" class="form-label ">
Textarea
</label>
<textarea class="form-control" id="myTextarea3921" rows="3" name="myTextarea3921"></textarea>
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField8873" class="form-label ">
Dateiupload
</label>
<input class="form-control" id="myInputField8873" type="file" name="myInputField8873">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField9168" class="form-label ">
Time
</label>
<input class="form-control" id="myInputField9168" type="time" name="myInputField9168">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField6167" class="form-label ">
Number
</label>
<input class="form-control" id="myInputField6167" type="number" name="myInputField6167">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField8649" class="form-label ">
Url
</label>
<input class="form-control" id="myInputField8649" type="url" name="myInputField8649">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField9976" class="form-label ">
Datepicker native (input[type=date])
</label>
<input class="form-control" id="myInputField9976" type="date" name="myInputField9976">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField9861" class="form-label ">
Datepicker with flatpickr.js (input.datepicker)
</label>
<input class="form-control datepicker" id="myInputField9861" type="text" name="myInputField9861">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField4110" class="form-label ">
Readonly
</label>
<input class="form-control" readonly id="myInputField4110" type="text" value="Dieser Text ist nicht zu ändern" name="myInputField4110">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField9276" 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="myInputField9276" type="text" name="myInputField9276">
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField3607" class="form-label ">
Input as plaintext
</label>
<input class="form-control-plaintext" readonly id="myInputField3607" type="text" value="Dieser Wert sieht aus wie Plaintext" name="myInputField3607">
</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
<form class="form--base panel--heavy">
<fieldset >
<legend >
Checkboxes legend
</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox4851" name="myCheckbox4851">
<label class="form-check-label" for="myCheckbox4851">Checkbox label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox4644" name="myCheckbox4644">
<label class="form-check-label" for="myCheckbox4644">Checkbox label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" disabled id="myCheckbox9652" name="myCheckbox9652">
<label class="form-check-label" for="myCheckbox9652">Disabled checkbox label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox2358" name="myCheckbox2358">
<label class="form-check-label" for="myCheckbox2358">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="myCheckbox5066" name="myCheckbox5066">
<label class="form-check-label" for="myCheckbox5066">Checkbox label</label>
</div>
</fieldset>
</form>
<form class="form--base panel--heavy">
<fieldset >
<legend >
Radio button legend
</legend>
<div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox5212" name="exampleRadios">
<label class="form-check-label" for="myCheckbox5212">Radio label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox8370" name="exampleRadios">
<label class="form-check-label" for="myCheckbox8370">Radio label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" disabled id="myCheckbox2771" name="exampleRadios">
<label class="form-check-label" for="myCheckbox2771">Disabled radio label</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox9659" name="exampleRadios">
<label class="form-check-label" for="myCheckbox9659">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="myCheckbox7956" name="exampleRadios">
<label class="form-check-label" for="myCheckbox7956">Radio label</label>
</div>
</fieldset>
</form>
Inline Checkboxen: Checkboxen und Radios können mit der Klasse .form-check-inline
horizontal gruppiert werden.
<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="myCheckbox6159" name="myCheckbox6159">
<label class="form-check-label" for="myCheckbox6159">Checkbox label</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="myCheckbox7290" name="myCheckbox7290">
<label class="form-check-label" for="myCheckbox7290">Checkbox label</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" disabled id="myCheckbox8705" name="myCheckbox8705">
<label class="form-check-label" for="myCheckbox8705">Disabled checkbox label</label>
</div>
</fieldset>
</form>
<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="myCheckbox8603" name="exampleRadios2">
<label class="form-check-label" for="myCheckbox8603">Radio button label</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="myCheckbox9976" name="exampleRadios2">
<label class="form-check-label" for="myCheckbox9976">Radio button label</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" disabled id="myCheckbox8636" name="exampleRadios2">
<label class="form-check-label" for="myCheckbox8636">Disabled Radio button label</label>
</div>
</fieldset>
</form>
Toggle switch
<form class="form--base panel--heavy">
<fieldset >
<legend >
Settings
</legend>
<div class="toggle-switch form-check">
<input type="checkbox" name="toggle-switch-input-5205" id="toggle-switch-5205" 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-5205">Receive Notifications</label>
</div>
<div class="toggle-switch form-check">
<input type="checkbox" name="toggle-switch-input-6741" id="toggle-switch-6741" 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-6741">Receive SMS</label>
</div>
<div class="toggle-switch form-check">
<input type="checkbox" name="toggle-switch-input-9772" id="toggle-switch-9772" 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-9772">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.
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField4139" class="form-label ">
Passwort
</label>
<input class="form-control" id="myInputField4139" type="password" aria-describedby="myInputField4139Help " placeholder="Geben Sie hier Ihr passwort ein" name="myInputField4139">
<small id="myInputField4139Help" 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.
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField8911" class="form-label ">
Textfeld
</label>
<input class="form-control is-invalid" id="myInputField8911" type="text" aria-describedby="myInputField8911Invalid " name="myInputField8911">
<div class="message message--error" id="myInputField8911Invalid">
Bitte füllen Sie dieses Feld aus.
</div>
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-group">
<label for="myInputField7782" class="form-label ">
Textfeld
</label>
<input class="form-control is-valid" id="myInputField7782" type="text" aria-describedby="myInputField7782Valid " value="Ich bin ein Text" name="myInputField7782">
<div class="message message--success" id="myInputField7782Valid">
Dieses Feld ist richtig ausgefüllt.
</div>
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" aria-describedby="myCheckbox6068Invalid " id="myCheckbox6068" name="myCheckbox6068">
<label class="form-check-label" for="myCheckbox6068">Checkbox</label>
<div id="myCheckbox6068Invalid" class="message message--error">Bitte füllen Sie dieses Feld aus.</div>
</div>
</form>
<form class="form--base panel--heavy">
<div class="form-check">
<input class="form-check-input is-valid" type="checkbox" aria-describedby="myCheckbox3255Valid " id="myCheckbox3255" name="myCheckbox3255">
<label class="form-check-label" for="myCheckbox3255">Checkbox</label>
<div id="myCheckbox3255Valid" 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="myInputField1495" class="form-label aural">
Textfeld
</label>
<input class="form-control" id="myInputField1495" type="text" name="myInputField1495">
</div>
<div class="form-group">
<label for="mySelect9485" class="form-label aural">
Auswahlliste
</label>
<select class="form-control" id="mySelect9485" name="mySelect9485">
<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="myCheckbox9915" name="myCheckbox9915">
<label class="form-check-label" for="myCheckbox9915">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="myInputField8475" class="form-label ">
Textfeld
</label>
<input class="form-control" id="myInputField8475" type="text" name="myInputField8475">
</div>
<div class="form-group">
<label for="myInputField7589" class="form-label ">
Textfeld
</label>
<input class="form-control" id="myInputField7589" type="text" name="myInputField7589">
</div>
<button type="submit" class="button">Button</button>
</div></form>