Formulare · FWT Dokumentation

Formulare

Formulare in FWT

Formulare sind einer der wichtigsten Bereiche einer Webseite. Sie müssen nicht nur gut aussehen, sondern auch verständlich, bedienbar und barrierearm funktionieren.

FWT bietet dafür Formulargruppen, Labels, Hilfetexte, Eingabefelder, Textareas, Selects, Checkboxen, Radios, Switches, Datei-Uploads, Eingabegruppen, Zustände und erste Formularmuster.

Wichtig: Ein Formularfeld braucht immer ein verständliches Label. Placeholder ersetzen kein Label.

Grundstruktur

Formular-Grundstruktur

Ein Formular sollte klar aufgebaut sein: Überschrift, kurze Erklärung, Felder mit Labels und verständliche Hilfetexte.

Live-Beispiel

HTML-Code anzeigen

<form class="fwt-form" action="#" method="post">
    <div class="fwt-form-section">
        <h3 class="fwt-form-title">Kontakt aufnehmen</h3>

        <p class="fwt-form-text">
            Ein einfaches Formular besteht aus Gruppen, Labels, Eingabefeldern
            und verständlichen Hilfetexten.
        </p>

        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-name">
                Name
                <span class="fwt-required" aria-hidden="true">*</span>
            </label>

            <input
                class="fwt-input"
                id="demo-name"
                name="name"
                type="text"
                placeholder="Max Mustermann"
                required
            >

            <p class="fwt-help">
                Bitte Vor- und Nachname eintragen.
            </p>
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-email">
                E-Mail-Adresse
                <span class="fwt-required" aria-hidden="true">*</span>
            </label>

            <input
                class="fwt-input"
                id="demo-email"
                name="email"
                type="email"
                placeholder="name@example.de"
                required
            >
        </div>
    </div>
</form>

Eingabefelder

Normale Eingabefelder

Textfelder, E-Mail-Felder, Datumsfelder und deaktivierte Felder sollen einheitlich aussehen und klar bedienbar bleiben.

Live-Beispiel

Textfeld

E-Mail

Datum

Deaktiviert

HTML-Code anzeigen

<div class="fwt-form">
    <div class="fwt-form-row">
        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-input-text">Textfeld</label>
            <input class="fwt-input" id="demo-input-text" type="text" placeholder="Normaler Text">
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-input-email">E-Mail</label>
            <input class="fwt-input" id="demo-input-email" type="email" placeholder="mail@example.de">
        </div>
    </div>

    <div class="fwt-form-row">
        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-input-date">Datum</label>
            <input class="fwt-input" id="demo-input-date" type="date">
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="demo-input-disabled">Deaktiviert</label>
            <input class="fwt-input" id="demo-input-disabled" type="text" value="Nicht bearbeitbar" disabled>
        </div>
    </div>
</div>

Textarea / Select

Textareas und Auswahlfelder

Textareas eignen sich für längere Eingaben. Selects sind sinnvoll, wenn eine feste Auswahl vorgegeben werden soll.

Live-Beispiel

Nachricht

Kurze, klare Angaben helfen bei der Bearbeitung.

Thema auswählen

HTML-Code anzeigen

<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="demo-message">Nachricht</label>

        <textarea
            class="fwt-textarea"
            id="demo-message"
            name="message"
            placeholder="Beschreibe kurz dein Anliegen."
        ></textarea>

        <p class="fwt-help">
            Kurze, klare Angaben helfen bei der Bearbeitung.
        </p>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="demo-topic">Thema auswählen</label>

        <select class="fwt-select" id="demo-topic" name="topic">
            <option value="">Bitte wählen</option>
            <option>Allgemeine Anfrage</option>
            <option>Webseite</option>
            <option>Designsystem</option>
            <option>Technische Hilfe</option>
        </select>
    </div>
</div>

Checkbox / Radio

Checkboxen und Radiobuttons

Checkboxen sind für Ja/Nein-Optionen oder Mehrfachauswahl gedacht. Radiobuttons sind sinnvoll, wenn genau eine Option gewählt werden soll.

Live-Beispiel

Kontaktwunsch

Per E-Mail Antwort an die angegebene E-Mail-Adresse. Telefonisch Rückruf, wenn eine Telefonnummer angegeben wurde.

Datenschutzhinweis gelesen Die Angaben werden nur zur Bearbeitung genutzt.

HTML-Code anzeigen

<div class="fwt-form">
    <fieldset class="fwt-fieldset">
        <legend class="fwt-legend">Kontaktwunsch</legend>

        <div class="fwt-option-list">
            <label class="fwt-radio">
                <input type="radio" name="contact" checked>

                <span class="fwt-radio-label">
                    <span class="fwt-radio-title">Per E-Mail</span>
                    <span class="fwt-radio-text">Antwort an die angegebene E-Mail-Adresse.</span>
                </span>
            </label>

            <label class="fwt-radio">
                <input type="radio" name="contact">

                <span class="fwt-radio-label">
                    <span class="fwt-radio-title">Telefonisch</span>
                    <span class="fwt-radio-text">Rückruf, wenn eine Telefonnummer angegeben wurde.</span>
                </span>
            </label>
        </div>
    </fieldset>

    <label class="fwt-check">
        <input type="checkbox">

        <span class="fwt-check-label">
            <span class="fwt-check-title">Datenschutzhinweis gelesen</span>
            <span class="fwt-check-text">Die Angaben werden nur zur Bearbeitung genutzt.</span>
        </span>
    </label>
</div>

Optionen / Switch

Optionskarten und Switch

Optionskarten machen Auswahlmöglichkeiten sichtbarer. Ein Switch eignet sich für einfache Ein/Aus-Einstellungen.

Live-Beispiel

Paket auswählen

Basis Für einfache Seiten und kleine Projekte. Erweitert Für mehr Inhalte, Bausteine und individuelle Bereiche.

Newsletter optional erhalten

HTML-Code anzeigen

<div class="fwt-form">
    <fieldset class="fwt-fieldset">
        <legend class="fwt-legend">Paket auswählen</legend>

        <div class="fwt-option-list">
            <label class="fwt-option-card">
                <input type="radio" name="package" checked>

                <span class="fwt-radio-label">
                    <span class="fwt-radio-title">Basis</span>
                    <span class="fwt-radio-text">Für einfache Seiten und kleine Projekte.</span>
                </span>
            </label>

            <label class="fwt-option-card">
                <input type="radio" name="package">

                <span class="fwt-radio-label">
                    <span class="fwt-radio-title">Erweitert</span>
                    <span class="fwt-radio-text">Für mehr Inhalte, Bausteine und individuelle Bereiche.</span>
                </span>
            </label>
        </div>
    </fieldset>

    <label class="fwt-switch">
        <input type="checkbox" checked>
        <span class="fwt-switch-control"></span>
        <span class="fwt-switch-text">Newsletter optional erhalten</span>
    </label>
</div>

Optionskarten nutzen :has(), um den gewählten Zustand sichtbar zu machen. In sehr alten Browsern kann diese Hervorhebung fehlen.

Datei-Upload

Datei-Uploads brauchen klare Hinweise. Nutzer müssen wissen, welche Dateitypen erlaubt sind und was mit den Dateien passiert.

Live-Beispiel

Datei hochladen

Nutze Datei-Uploads nur dort, wo sie wirklich gebraucht werden. Erlaubte Dateitypen sollten im echten Formular klar genannt werden.

HTML-Code anzeigen

<div class="fwt-file">
    <p class="fwt-file-title">Datei hochladen</p>

    <p class="fwt-file-text">
        Nutze Datei-Uploads nur dort, wo sie wirklich gebraucht werden.
        Erlaubte Dateitypen sollten im echten Formular klar genannt werden.
    </p>

    <input type="file" name="demo-file">
</div>

Eingabegruppen

Eingabegruppen verbinden ein Feld mit einem Zusatz, zum Beispiel Währung, Einheit oder Domain-Endung.

Live-Beispiel

Preis

€

Webadresse

.de

HTML-Code anzeigen

<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="demo-price">Preis</label>

        <div class="fwt-input-group">
            <span class="fwt-input-addon">€</span>
            <input class="fwt-input" id="demo-price" type="number" placeholder="0,00">
        </div>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="demo-domain">Webadresse</label>

        <div class="fwt-input-group">
            <input class="fwt-input" id="demo-domain" type="text" placeholder="chasalla">
            <span class="fwt-input-addon">.de</span>
        </div>
    </div>
</div>

Zustände

Erfolg, Prüfung und Fehler

Formularzustände müssen klar erklären, was los ist. Farbe hilft, aber der Text muss die Bedeutung tragen.

Live-Beispiel

Erfolgreich

Diese Eingabe sieht gut aus.

Prüfen

Bitte prüfe diese Angabe noch einmal.

Fehler

Dieses Feld darf nicht leer bleiben.

HTML-Code anzeigen

<div class="fwt-form">
    <div class="fwt-form-group fwt-field-success">
        <label class="fwt-label" for="demo-success">Erfolgreich</label>
        <input class="fwt-input" id="demo-success" type="text" value="Eingabe ist gültig">
        <p class="fwt-help fwt-help-success">Diese Eingabe sieht gut aus.</p>
    </div>

    <div class="fwt-form-group fwt-field-warning">
        <label class="fwt-label" for="demo-warning">Prüfen</label>
        <input class="fwt-input" id="demo-warning" type="text" value="Bitte kontrollieren">
        <p class="fwt-help fwt-help-warning">Bitte prüfe diese Angabe noch einmal.</p>
    </div>

    <div class="fwt-form-group fwt-field-danger">
        <label class="fwt-label" for="demo-danger">Fehler</label>
        <input class="fwt-input" id="demo-danger" type="text" value="">
        <p class="fwt-help fwt-help-danger">Dieses Feld darf nicht leer bleiben.</p>
    </div>
</div>

Ein Fehler braucht immer eine verständliche Meldung, nicht nur einen roten Rahmen.

Muster

Kleines Anfrageformular

FWT soll später nicht nur einzelne Felder zeigen, sondern direkt nutzbare Formularmuster anbieten.

Live-Beispiel

HTML-Code anzeigen

<form class="fwt-form-card fwt-form-card-wide" action="#" method="post">
    <div>
        <h3 class="fwt-form-card-title">Kurze Anfrage</h3>

        <p class="fwt-form-card-text">
            Dieses Muster zeigt ein kleines Formular, das später als Kontakt-,
            Rückruf- oder Anfrageformular ausgebaut werden kann.
        </p>
    </div>

    <div class="fwt-form-row">
        <div class="fwt-form-group">
            <label class="fwt-label" for="pattern-name">
                Name
                <span class="fwt-required" aria-hidden="true">*</span>
            </label>

            <input class="fwt-input" id="pattern-name" name="name" type="text" required>
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="pattern-email">
                E-Mail
                <span class="fwt-required" aria-hidden="true">*</span>
            </label>

            <input class="fwt-input" id="pattern-email" name="email" type="email" required>
        </div>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="pattern-message">Nachricht</label>

        <textarea
            class="fwt-textarea fwt-textarea-sm"
            id="pattern-message"
            name="message"
            placeholder="Worum geht es?"
        ></textarea>
    </div>

    <label class="fwt-check">
        <input type="checkbox" required>

        <span class="fwt-check-label">
            <span class="fwt-check-title">Datenschutzhinweis akzeptieren</span>
            <span class="fwt-check-text">Die Angaben werden nur zur Bearbeitung der Anfrage genutzt.</span>
        </span>
    </label>

    <div class="fwt-form-actions fwt-form-actions-end">
        <button class="fwt-btn fwt-btn-secondary" type="button">
            Abbrechen
        </button>

        <button class="fwt-btn fwt-btn-primary" type="submit">
            Anfrage senden
        </button>
    </div>
</form>

Barrierefreiheit

Formulare richtig verwenden

Labels verwenden

Jedes Formularfeld braucht ein sichtbares Label.

<label class="fwt-label" for="email">E-Mail</label>

Placeholder nicht als Label

Placeholder verschwinden beim Tippen und ersetzen keine Beschriftung.

<input class="fwt-input" placeholder="Nur Zusatzhinweis">

Fehler erklären

Ein roter Rahmen allein reicht nicht. Eine Fehlermeldung muss sagen, was korrigiert werden soll.

<p class="fwt-error">Bitte E-Mail-Adresse prüfen.</p>

Pflichtfelder kennzeichnen

Pflichtfelder sollten klar markiert und zusätzlich erklärt werden.

<span class="fwt-required">*</span>

Fieldset und Legend nutzen

Zusammengehörige Auswahlfelder brauchen eine Gruppierung.

<fieldset class="fwt-fieldset"><legend class="fwt-legend">Auswahl</legend>...</fieldset>

Datenschutz erklären

Bei Formularen muss klar sein, wofür Daten verwendet werden.

<label class="fwt-check">Datenschutzhinweis akzeptieren</label>