Form Group

Die Form Group dient zur strukturierten Darstellung von Formularfeldern.
Sie kombiniert Label, Eingabefeld, Hilfetext und Fehlermeldungen zu einer gemeinsamen Einheit.

Beispiele

Basic

Eine einfache Form Group mit Label und Input.

Name


<div class="m-form-group">
    <label
        class="m-form-group__label"
        for="name">
        Name
    </label>

    <input
        class="a-input"
        id="name"
        type="text">
</div>

Required

Kennzeichnung eines Pflichtfeldes.

E-Mail


<div class="m-form-group -required">
    <label
        class="m-form-group__label"
        for="email">
        E-Mail
    </label>

    <input
        class="a-input"
        id="email"
        type="email"
        required>
</div>

Help Text

Zusätzliche Hinweise können unterhalb des Feldes angezeigt werden.

Benutzername

Der Benutzername muss eindeutig sein.


<div class="m-form-group">
    <label
        class="m-form-group__label"
        for="username">
        Benutzername
    </label>

    <input
        class="a-input"
        id="username"
        type="text">

    <p class="m-form-group__help">
        Der Benutzername muss eindeutig sein.
    </p>
</div>

Error State

Fehlerzustände sollten direkt am Feld angezeigt werden.

E-Mail

Bitte gib eine gültige E-Mail-Adresse ein.


<div class="m-form-group">
    <label
        class="m-form-group__label"
        for="email-error">
        E-Mail
    </label>

    <input
        class="a-input -error"
        id="email-error"
        type="email"
        aria-describedby="email-error-message">

    <p
        class="m-form-group__error"
        id="email-error-message">
        Bitte gib eine gültige E-Mail-Adresse ein.
    </p>
</div>

Textarea

Form Groups können auch mit Textareas verwendet werden.

Nachricht

Beschreibe dein Anliegen möglichst genau.


<div class="m-form-group">
    <label
        class="m-form-group__label"
        for="message">
        Nachricht
    </label>

    <textarea
        class="a-textarea"
        id="message"></textarea>

    <p class="m-form-group__help">
        Beschreibe dein Anliegen möglichst genau.
    </p>
</div>

Klassen

Klasse	Beschreibung
`.m-form-group`	Container für ein Formularfeld.
`.m-form-group__label`	Beschriftung des Formularfeldes.
`.m-form-group.-required`	Kennzeichnet die Form Group als Pflichtfeld und zeigt ein Sternchen am Label an.
`.m-form-group__help`	Hilfetext unterhalb des Feldes.
`.m-form-group__error`	Fehlermeldung unterhalb des Feldes.

Hinweise

Die Form Group dient als Standardcontainer für Formularfelder. Sie sollte für Inputs, Textareas, Selects, Checkboxen und Radios verwendet werden.

Best Practices

Verwende für jedes Formularfeld eine eigene Form Group. Dadurch bleiben Formulare konsistent und leicht wartbar.

Fehlermeldungen sollten nicht außerhalb der Form Group dargestellt werden. Der Bezug zum Feld geht sonst verloren.

Accessibility

Labels sollten immer mit dem zugehörigen Formularfeld über das for-Attribut verknüpft werden.

Fehlermeldungen sollten über aria-describedby mit dem Formularfeld verbunden werden.

Die Klasse -required zeigt nur visuell an, dass ein Feld erforderlich ist. Das eigentliche Formularfeld sollte zusätzlich das Attribut required besitzen.