Direkt zum Inhalt springen

Freie Webtools

Dokumentation

Aufbau, Einbindung und Beispiele für das FWT-System. Verständlich erklärt, sichtbar gezeigt und direkt nutzbar.

CSS-System Dokumentation Datenschutzfreundlich

Formulare / Inputs

Inputs und Eingabeelemente

Eingabeelemente sind die Grundlage fast jedes Formulars. FWT soll hier nicht nur normale Textfelder zeigen, sondern verständlich erklären, welches Feld wofür gedacht ist.

Diese Seite ergänzt die Formular-Grundlagen um Textfelder, Spezialfelder, Textareas, Selects, Mehrfachselects, Range, Farbfelder, Feldhinweise und einen Ausblick auf den späteren komfortablen FWT-Multiselect.

Wichtig: Auch spezielle Eingabeelemente brauchen verständliche Labels. Ein Placeholder ersetzt kein Label.

Textfelder

Text, E-Mail, Telefon und URL

Normale Textfelder decken viele einfache Eingaben ab. Passende Input-Typen helfen Browsern und Mobilgeräten, bessere Tastaturen und Prüfungen anzubieten.

Live-Beispiel
HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-row">
        <div class="fwt-form-group">
            <label class="fwt-label" for="input-text">
                Text
            </label>

            <input
                class="fwt-input"
                id="input-text"
                type="text"
                placeholder="Normaler Text"
            >
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="input-email">
                E-Mail
            </label>

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

    <div class="fwt-form-row">
        <div class="fwt-form-group">
            <label class="fwt-label" for="input-phone">
                Telefon
            </label>

            <input
                class="fwt-input"
                id="input-phone"
                type="tel"
                placeholder="0561 / 000000"
            >
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="input-url">
                Webseite
            </label>

            <input
                class="fwt-input"
                id="input-url"
                type="url"
                placeholder="https://example.de"
            >
        </div>
    </div>
</div>

Spezialfelder

Suche, Passwort, Zahl, Datum und Uhrzeit

Spezialfelder sollten gezielt eingesetzt werden. Sie verbessern Bedienung und Eingabe, wenn der Typ wirklich zum Inhalt passt.

Live-Beispiel
  • Mindestens 12 Zeichen verwenden.
  • Keine echten Passwörter in Beispielen zeigen.
  • Passwortregeln verständlich erklären.
HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-search-box">
        <label class="fwt-label" for="input-search">
            Suche
        </label>

        <input
            class="fwt-input fwt-input-search"
            id="input-search"
            type="search"
            placeholder="Dokumentation durchsuchen"
        >
    </div>

    <div class="fwt-password-box">
        <label class="fwt-label" for="input-password">
            Passwort
        </label>

        <input
            class="fwt-input"
            id="input-password"
            type="password"
            placeholder="Passwort eingeben"
        >

        <ul class="fwt-password-hint">
            <li>Mindestens 12 Zeichen verwenden.</li>
            <li>Keine echten Passwörter in Beispielen zeigen.</li>
            <li>Passwortregeln verständlich erklären.</li>
        </ul>
    </div>

    <div class="fwt-form-row-3">
        <div class="fwt-form-group">
            <label class="fwt-label" for="input-number">
                Menge
            </label>

            <input
                class="fwt-input fwt-input-number"
                id="input-number"
                type="number"
                value="12"
            >
        </div>

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

            <input
                class="fwt-input fwt-input-date"
                id="input-date"
                type="date"
            >
        </div>

        <div class="fwt-form-group">
            <label class="fwt-label" for="input-time">
                Uhrzeit
            </label>

            <input
                class="fwt-input fwt-input-time"
                id="input-time"
                type="time"
            >
        </div>
    </div>
</div>

Textarea

Textareas für längere Eingaben

Textareas eignen sich für längere Texte, Nachrichten, Beschreibungen, Adressdaten oder technische Inhalte.

Live-Beispiel

Für normale Nachrichten oder längere Eingaben.

Gut für Inhalte, die später mit fwt-preline oder fwt-address ausgegeben werden.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="textarea-normal">
            Nachricht
        </label>

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

        <p class="fwt-help">
            Für normale Nachrichten oder längere Eingaben.
        </p>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="textarea-preline">
            Mehrzeiliger Text
        </label>

        <textarea
            class="fwt-textarea fwt-textarea-sm fwt-textarea-preline"
            id="textarea-preline"
        >Chasalla.de
Adresse später ergänzen
Deutschland / Europa</textarea>

        <p class="fwt-help">
            Gut für Inhalte, die später mit <code>fwt-preline</code> oder
            <code>fwt-address</code> ausgegeben werden.
        </p>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="textarea-code">
            Code / Konfiguration
        </label>

        <textarea
            class="fwt-textarea fwt-textarea-code"
            id="textarea-code"
        >@import url("03-content/typography.css");
@import url("04-components/forms.css");</textarea>
    </div>
</div>
Für gespeicherte mehrzeilige Inhalte kann später bei der Ausgabe fwt-preline oder fwt-address genutzt werden.

Selects

Auswahlfelder und Optionsgruppen

Selects sind sinnvoll, wenn Nutzer aus einer festen Auswahl wählen sollen. Bei längeren Listen helfen Optionsgruppen.

Live-Beispiel

Optionsgruppen helfen, längere Auswahllisten besser zu strukturieren.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-simple">
            Thema auswählen
        </label>

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

    <div class="fwt-form-group">
        <label class="fwt-label" for="select-groups">
            Bereich auswählen
        </label>

        <select class="fwt-select" id="select-groups">
            <option value="">Bitte wählen</option>

            <optgroup label="Inhalt">
                <option>Typografie</option>
                <option>Links</option>
                <option>Listen</option>
            </optgroup>

            <optgroup label="Komponenten">
                <option>Formulare</option>
                <option>Buttons</option>
                <option>Cards</option>
            </optgroup>
        </select>

        <p class="fwt-help">
            Optionsgruppen helfen, längere Auswahllisten besser zu strukturieren.
        </p>
    </div>
</div>

Mehrfachselect

Mehrfachauswahl als sichere Grundlage

Für Release I bleibt der normale HTML-Mehrfachselect die stabile Grundlage. Er funktioniert ohne JavaScript und bleibt auch dann nutzbar, wenn spätere Komfortfunktionen nicht geladen werden.

Live-Beispiel

Mehrfachauswahl als HTML-Grundlage. Je nach Gerät werden mehrere Einträge mit Strg, Shift oder Touch-Gesten ausgewählt.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-multiple">
            Mehrere Bereiche auswählen
        </label>

        <select
            class="fwt-select fwt-multiselect-basic"
            id="select-multiple"
            multiple
            size="7"
        >
            <option>Typografie</option>
            <option>Links</option>
            <option>Code / Terminal</option>
            <option>Listen</option>
            <option>Bilder</option>
            <option>Figuren & Medien</option>
            <option>Tabellen</option>
            <option>Formulare</option>
        </select>

        <p class="fwt-multiselect-help">
            Mehrfachauswahl als HTML-Grundlage. Je nach Gerät werden mehrere
            Einträge mit Strg, Shift oder Touch-Gesten ausgewählt.
        </p>
    </div>
</div>
Komfortfunktionen wie Suche, Chips, Tastatursteuerung und Checkboxliste planen wir für Release II.

Range / Farbe

Schieberegler und Farbfeld

Range-Felder eignen sich für Wertebereiche. Farbfelder sind hilfreich, wenn Nutzer bewusst eine Farbe auswählen sollen.

Live-Beispiel
0 65 100
Beispiel-Farbwert
HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-range">
        <label class="fwt-label" for="input-range">
            Intensität
        </label>

        <input
            class="fwt-input-range"
            id="input-range"
            type="range"
            min="0"
            max="100"
            value="65"
        >

        <div class="fwt-range-meta">
            <span>0</span>
            <span>65</span>
            <span>100</span>
        </div>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="input-color">
            Farbe auswählen
        </label>

        <div class="fwt-color-input">
            <input
                class="fwt-input fwt-input-color"
                id="input-color"
                type="color"
                value="#06b6d4"
            >

            <span class="fwt-color-preview">
                Beispiel-Farbwert
            </span>
        </div>
    </div>
</div>

Hinweise / Zähler

Feldhinweise und Zeichenzähler

Kleine Hinweise, Zeichenzähler und Meta-Informationen helfen Nutzern, Eingaben besser einzuschätzen.

Live-Beispiel
Maximal 80 Zeichen. 43 / 80
Bitte kürzer und klarer formulieren. 76 / 80
HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="input-meta">
            Kurzbeschreibung
        </label>

        <input
            class="fwt-input"
            id="input-meta"
            type="text"
            maxlength="80"
            value="Kurzer Beschreibungstext für eine Karte."
        >

        <div class="fwt-field-meta">
            <span>Maximal 80 Zeichen.</span>
            <span class="fwt-counter">43 / 80</span>
        </div>
    </div>

    <div class="fwt-form-group fwt-field-warning">
        <label class="fwt-label" for="input-warning-counter">
            Beschreibung prüfen
        </label>

        <input
            class="fwt-input"
            id="input-warning-counter"
            type="text"
            value="Dieser Text ist schon ziemlich lang und sollte gekürzt werden."
        >

        <div class="fwt-field-meta">
            <span class="fwt-help-warning">Bitte kürzer und klarer formulieren.</span>
            <span class="fwt-counter fwt-counter-warning">76 / 80</span>
        </div>
    </div>
</div>
Ein Zähler allein reicht nicht. Bei Problemen sollte zusätzlich erklärt werden, was der Nutzer ändern soll.

Ausblick

FWT-Multiselect für Release II

Der spätere FWT-Multiselect soll Suche, Checkboxen, Chips und gute Tastaturbedienung bieten. Er wird aber als Komfortschicht geplant, nicht als einzige Möglichkeit.

Visuelle Vorschau
  • Typografie
  • Formulare

Visuelle Vorschau für Release II. Die funktionierende Grundlage bleibt in Release I der normale HTML-Mehrfachselect.

HTML-Code anzeigen 
<div class="fwt-multiselect-preview">
    <div class="fwt-form-group">
        <label class="fwt-label" for="multiselect-search">
            FWT-Multiselect Vorschau
        </label>

        <input
            class="fwt-input fwt-input-search fwt-multiselect-search"
            id="multiselect-search"
            type="search"
            placeholder="Bereich suchen"
            disabled
        >
    </div>

    <ul class="fwt-chip-list">
        <li class="fwt-chip">
            Typografie
            <span class="fwt-chip-remove" aria-hidden="true">×</span>
        </li>

        <li class="fwt-chip">
            Formulare
            <span class="fwt-chip-remove" aria-hidden="true">×</span>
        </li>
    </ul>

    <div class="fwt-multiselect-options">
        <label class="fwt-multiselect-option">
            <input type="checkbox" checked disabled>
            <span>Typografie</span>
        </label>

        <label class="fwt-multiselect-option">
            <input type="checkbox" disabled>
            <span>Links</span>
        </label>

        <label class="fwt-multiselect-option">
            <input type="checkbox" checked disabled>
            <span>Formulare</span>
        </label>
    </div>

    <p class="fwt-help">
        Visuelle Vorschau für Release II. Die funktionierende Grundlage bleibt
        in Release I der normale HTML-Mehrfachselect.
    </p>
</div>
Grundregel: Ohne JavaScript muss die Mehrfachauswahl weiterhin nutzbar bleiben.

Barrierefreiheit

Inputs richtig verwenden

Passenden Typ nutzen

E-Mail, Telefon, Datum oder Zahl sollten passende Input-Typen bekommen.

<input class="fwt-input" type="email">

Labels bleiben Pflicht

Placeholder sind nur Zusatzhinweise und ersetzen keine Beschriftung.

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

Mehrfachselect erklären

Nutzer müssen wissen, dass mehrere Einträge gewählt werden können.

<select class="fwt-select" multiple>...</select>

Fehler verständlich machen

Feldzustände brauchen immer erklärenden Text.

<p class="fwt-help fwt-help-danger">Bitte prüfen.</p>

Farbfelder nicht allein nutzen

Ein Farbwert sollte zusätzlich als Text oder Wert sichtbar sein.

<input class="fwt-input-color" type="color">

JavaScript nur als Komfort

Erweiterte Inputs dürfen die Grundbedienung nicht zerstören.

Release II: Komfortschicht