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 Elementen gefüllt werden. (Beispielformulare)

The basic layout of a group of input fields is provided with the basic mark-up. It should always be used and specifies the basic formatting and alignment of the elements. This basic mark-up can be filled with any of the elements in the following elements. (Exampleforms)

Table of contents

Form elements

Text

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

Select

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

Multiselect

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

Custom multiselect with checkboxes

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

    <div class="form-group js-multi-select">

        <label id="mylabel7441" class="form-label">Label</label>

        <!-- Trigger -->
        <button type="button" class="multi-select__trigger" aria-expanded="false" aria-controls="mypanel7441" aria-labelledby="mylabel7441 mytext7441">            
            <span id="mytext7441" class="multi-select__text">Bitte wählen</span>
        </button>
        
        <!-- Text/Messages (i18n) -->
        <div class="multi-select__messages" hidden>
            <span data-role="placeholder">Bitte wählen</span>
            <span data-role="selected">ausgewählt</span>
        </div>

        <!-- Dropdown Panel -->
        <div class="multi-select__panel" id="mypanel7441" hidden>
            <fieldset class="multi-select__options">
                <legend class="aural">Label auswählen</legend>
                <label class="multi-select__option">
                    <input type="checkbox" name="myname7441[]" value="option1">Option 1</label>
                <label class="multi-select__option">
                    <input type="checkbox" name="myname7441[]" value="option2">Option 2</label>
                <label class="multi-select__option">
                    <input type="checkbox" name="myname7441[]" value="option3">Option 3</label>
            </fieldset>
        </div>

    </div>
</form>

File

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

Time

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

Number

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

Url

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

Date

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

Custom datepicker

HTML
<form class="form--base panel--heavy">
    <div class="form-group">
        <label for="myInputField9111" class="form-label ">
            Label
        </label> 
        <input class="form-control datepicker" id="myInputField9111" type="text" name="myInputField9111">
    </div>
</form>

Readonly

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

Required

HTML
<form class="form--base panel--heavy">
    <div class="form-group">
        <label for="myInputField1378" class="form-label ">
            Label  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required id="myInputField1378" type="text" name="myInputField1378">
    </div>
</form>

Input as plain text

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

    <fieldset >
        <legend >
                Checkboxes legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox8948" name="myCheckbox8948">
                <label class="form-check-label" for="myCheckbox8948">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox6070" name="myCheckbox6070">
                <label class="form-check-label" for="myCheckbox6070">Checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox5607" name="myCheckbox5607">
                <label class="form-check-label" for="myCheckbox5607">Disabled checkbox label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="myCheckbox8638" name="myCheckbox8638">
                <label class="form-check-label" for="myCheckbox8638">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="myCheckbox8989" name="myCheckbox8989">
                <label class="form-check-label" for="myCheckbox8989">Checkbox label</label>
            </div>
    </fieldset>
</form>
Radio button legend
HTML
<form class="form--base panel--heavy">

    <fieldset >
        <legend >
                Radio button legend
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox9018" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox9018">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox197" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox197">Radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" disabled id="myCheckbox9615" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox9615">Disabled radio label</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox2395" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox2395">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="myCheckbox1446" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox1446">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
HTML
<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="myCheckbox8188" name="myCheckbox8188">
                <label class="form-check-label" for="myCheckbox8188">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox9269" name="myCheckbox9269">
                <label class="form-check-label" for="myCheckbox9269">Checkbox label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" disabled id="myCheckbox8364" name="myCheckbox8364">
                <label class="form-check-label" for="myCheckbox8364">Disabled checkbox label</label>
            </div>
    </fieldset>
</form>
Inline radio buttons legend
HTML
<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="myCheckbox2779" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox2779">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox9468" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox9468">Radio button label</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" disabled id="myCheckbox2636" name="exampleRadios2">
                <label class="form-check-label" for="myCheckbox2636">Disabled Radio button label</label>
            </div>
    </fieldset>
</form>

Toggle switch

Bitte beachten Sie
Toggle Switches sind An- und Aus-Schalter, 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.

Please note
Toggle switches are on/off switches that immediately trigger an action without the user having to click on “Save” or “Submit” to apply the new state. Toggle switches are technically checkboxes but should not be used as such. For more information, we recommend the Toggle Switch Guidelines from the Nielsen Norman Group.

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

    <fieldset >
        <legend >
                Settings
        </legend>
    
          <div class="toggle-switch form-check">
            <input type="checkbox" name="toggle-switch-input-9643" id="toggle-switch-9643" 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-9643">Receive Notifications</label>
          </div>
      
          <div class="toggle-switch form-check">
            <input type="checkbox" name="toggle-switch-input-5889" id="toggle-switch-5889" 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-5889">Receive SMS</label>
          </div>
      
          <div class="toggle-switch form-check">
            <input type="checkbox" name="toggle-switch-input-2728" id="toggle-switch-2728" 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-2728">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.
HTML
<form class="form--base panel--heavy">
    <div class="form-group">
        <label for="myInputField9121" class="form-label ">
            Passwort
        </label> 
        <input class="form-control" id="myInputField9121" type="password" aria-describedby="myInputField9121Help " placeholder="Geben Sie hier Ihr passwort ein" name="myInputField9121">
        <small id="myInputField9121Help" 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.

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

Bitte füllen Sie dieses Feld aus.

HTML
<form class="form--base panel--heavy">
            <div class="form-check">
                <input class="form-check-input is-invalid" type="checkbox" aria-invalid="true" aria-describedby="myCheckbox3352Invalid" id="myCheckbox3352" name="myCheckbox3352">
                <label class="form-check-label" for="myCheckbox3352">Label</label>
                <p id="myCheckbox3352Invalid" class="message message--error">Bitte füllen Sie dieses Feld aus.</p>
            </div>
</form>
Wie zufrieden sind Sie mit dieser Frage?

Bitte füllen Sie dieses Feld aus.

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

    <fieldset >
        <legend >
                Wie zufrieden sind Sie mit dieser Frage?
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input is-invalid" type="radio" aria-invalid="true" aria-describedby="myFieldset985Invalid" id="myCheckbox4854" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox4854">Sehr zufrieden</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input is-invalid" type="radio" aria-invalid="true" aria-describedby="myFieldset985Invalid" id="myCheckbox7890" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox7890">Ist mir egal</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input is-invalid" type="radio" aria-invalid="true" aria-describedby="myFieldset985Invalid" id="myCheckbox3693" name="exampleRadios">
                <label class="form-check-label" for="myCheckbox3693">Weniger zufrieden</label>
            </div>
            <p class="message message--error" id="myFieldset985Invalid">Bitte füllen Sie dieses Feld aus.</p>
    </fieldset>
</form>

Horizontale Elemente

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

HTML
<form class="form--base panel--heavy">
    <div class="form-group form-group form-group--inline">
    <div class="form-group">
        <label for="myInputField3389" class="form-label aural">
            Label
        </label> 
        <input class="form-control" id="myInputField3389" type="text" name="myInputField3389">
    </div>
    <div class="form-group">
        
    <label for="mySelect8357" class="form-label aural">
        Label        
    </label>
    <select class="form-control" id="mySelect8357" name="mySelect8357"
        >
            <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="myCheckbox6762" name="myCheckbox6762">
                <label class="form-check-label" for="myCheckbox6762">Label</label>
            </div>
<button type="submit" class="button">Button</button>
    </div>
</form>

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

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

Beispiel 1

Hinweis: Pflichtfelder sind mit einem (Pflichtfeld) markiert.

Helptext
Helptext
Frage
Frage
Back

Optionaler Footer

HTML
<form class="form--base panel--heavy">
    <p class="form-description">
        Hinweis: Pflichtfelder sind mit einem  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span> markiert.
    </p>
    <div class="form-group">
        <label for="myInputField8172" class="form-label ">
            Input  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required id="myInputField8172" type="text" aria-describedby="myInputField8172Help " name="myInputField8172">
        <small id="myInputField8172Help" class="formgroup__help">Helptext</small>
    </div>
    <div class="form-group">
        
    <label for="mySelect3593" class="form-label">
        Select  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>        
    </label>
    <select class="form-control" required id="mySelect3593" aria-describedby="mySelect3593Help " name="mySelect3593"
        >
            <option value="">Bitte wählen</option>
                <option value="option1">Option1</option>
                <option value="option2">Option2</option>
        </select>
    <small id="mySelect3593Help" 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="myCheckbox6237" name="myCheckbox6237">
                <label class="form-check-label" for="myCheckbox6237">Antwort 1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="myCheckbox892" name="myCheckbox892">
                <label class="form-check-label" for="myCheckbox892">Antwort 2</label>
            </div>
    </fieldset>

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

Beispiel 2: Login mit Fehlermeldung

Hinweis zu Fehlermeldungen in Loginformularen

Eingabefelder in Loginformularen erhalten normalerweise keine Fehlerhervorhebung. Der Server kennt nur eine ungültige Kombination. Er weiß nicht, beziehungsweise kommuniziert bewusst nicht, ob die E-Mail-Adresse oder das Passwort falsch ist.
Bitte benutzen Sie außerden bei der Fehlermeldung über dem Formular eine Überschriftenebene, die zu Ihrer Seitenstruktur passt (oder alternativ strong)

Hinweis: Pflichtfelder sind mit einem (Pflichtfeld) markiert.

Passwort zurücksetzen
HTML
<div role="alert" class="message message--error">
        <h3 class="title"><i class="bicon bicon-times-circle" aria-hidden="true"></i>Anmeldung fehlgeschlagen</h3>
        <ul><li>E-Mail-Adresse oder Passwort sind nicht korrekt.</li></ul>    
</div>
<form class="form--base panel--heavy">
    <p class="form-description">
        Hinweis: Pflichtfelder sind mit einem  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span> markiert.
    </p>
    <div class="form-group">
        <label for="myInputField9552" class="form-label ">
            E-Mail-Adresse  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required id="myInputField9552" type="email" value="meine@email.adresse" autocomplete="username" name="myInputField9552">
    </div>
    <div class="form-group">
        <label for="myInputField2571" class="form-label ">
            Passwort  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required id="myInputField2571" type="password" autocomplete="current-password" name="myInputField2571">
    </div>
    <div class="form-actions">            
        <button type="submit" class="button">Anmelden</button>
    </div>
    <div class="mytop-1">
        <a href="#randomtarget202">Passwort zurücksetzen</a>
    </div>
</form>

Beispiel 3: Registrierung mit Fehlermeldung

Hinweis zu Fehlermeldungen im Registrierungsformular

Die Klasse is-invalid markiert beide Passwortfelder optisch als Teil des fehlerhaften Eingabebereichs. Auf aria-invalid="true" wird verzichtet, da die Felder nach dem Neuladen leer sind und somit keinen aktuell ungültigen Wert enthalten. Für assistive Technologien wird der vorherige Validierungsfehler über die Fehlerzusammenfassung kommuniziert.

Hinweis: Pflichtfelder sind mit einem (Pflichtfeld) markiert.

Bitte stimmen Sie der Datenschutzerklärung zu.

HTML
<div role="alert" class="message message--error">
        
<h2 class="title"><i class="bicon bicon-times-circle" aria-hidden="true"></i>Das Konto konnte nicht erstellt werden</h2>
            <ul>
        <li>
                <a href="#password">Die Passwörter stimmen nicht überein. Bitte geben Sie beide Passwörter erneut ein.</a>
        </li>
        <li>
                <a href="#consent">Bitte stimmen Sie der Datenschutzerklärung zu.</a>
        </li>
    </ul>
    </div>
<form class="form--base panel--heavy">
    <p class="form-description">
        Hinweis: Pflichtfelder sind mit einem  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span> markiert.
    </p>
    <div class="form-group">
        <label for="email" class="form-label ">
            E-Mail-Adresse  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control" required id="email" type="email" value="meine@email.adresse" autocomplete="username" name="email">
    </div>
    <div class="form-group">
        <label for="password" class="form-label ">
            Passwort  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control is-invalid" required id="password" type="password" autocomplete="new-password" name="password">
    </div>
    <div class="form-group">
        <label for="confirmPassword" class="form-label ">
            Passwort wiederholen  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>
        </label> 
        <input class="form-control is-invalid" required id="confirmPassword" type="password" autocomplete="new-password" name="confirmPassword">
    </div>
            <div class="form-check">
                <input class="form-check-input is-invalid" type="checkbox" aria-invalid="true" aria-describedby="consentInvalid" required id="consent" name="consent">
                <label class="form-check-label text--small" for="consent">Ich habe die <a href="#" target="_blank" class="extern">Datenschutzerklärung<span class="aural"> (öffnet in neuem Fenster)</span></a> gelesen und willige in die Speicherung und Nutzung meiner Daten ein.  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span></label>
                <p id="consentInvalid" class="message message--error">Bitte stimmen Sie der Datenschutzerklärung zu.</p>
            </div>
    <div class="form-actions">            
        <button type="submit" class="button">Konto erstellen</button>
    </div>
</form>