Formulare

Für die korrekte Darstellung der Datei-Upload-Felder und Auswahllisten müssen Formulare per JavaScript initialisiert werden.

window.additionalComponent.load('form', {
    el: '[data-component="123143242"]'
});

Gruppierung und Überschriften

Eingabefelder und ihre Labels werden in übergeordneten div-Containern mit der CSS-Klasse form-group vereint. Zusammengehörige Gruppen von Eingabefeldern können wiederrum in Elemente vom Typ fieldset gruppiert werden. Mit Hilfe eines legend-Elements innerhalb dieser Gruppe werden diese beschriftet, was der Darstellung einer Überschrift 3. Ebene gleicht. Ein legend-Element als direktes Kindelement eines Formulars sorgt hingegen für eine Überschrift der 2. Ebene und beschreibt so das gesamte Formular.

Labels und Eingabefelder

Es stehen gängige Input-Typen zur Verfügung, die wie gewohnt mittels type-Attribut gesetzt werden. Werte wie email, date oder number wirken sich dabei sowohl auf die Darstellung, als auch auf die Bedienung und Validierung aus. Prinzipiell werden alle in HTML5 validen Typen unterstützt, wobei Funktion und Darstellung der zugehörigen Eingabehilfen jedoch je nach verwendeten Browser und Betriebssystem variieren können.

Jedes Eingabefeld muss mit der CSS-Klasse form-control versehen und mit einem Element der CSS-Klasse form-group-content umgeben werden. Jedes Label benötigt die CSS-Klasse control-label.

<form action="#" data-component="form-123143242">
    <legend>Beispielformular</legend>
    <fieldset>
        <legend>Kontaktdaten</legend>
        <div class="form-group">
            <label class="control-label" for="name">Name *</label>
            <div class="form-group-content">
                <input id="name" name="name" type="text" placeholder="Max Mustermann" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="email">E-Mail *</label>
            <div class="form-group-content">
                <input id="email" name="email" type="email" class="form-control" required="required" />
            </div>
        </div>
    </fieldset>
    <p class="text-muted">* Die mit einem Stern gekennzeichneten Felder sind zwingend auszufüllen.</p>
    <button type="submit" class="btn btn-success">Absenden</button>
</form>

Unabhängig ihres Typs müssen Buttons mit der CSS-Klasse btn versehen werden. Um verschiedene Buttons zu unterscheiden, kann je nach Art eine weitere Button-CSS-Klasse ergänzt werden.

Darstellung	CSS-Klasse
Standard	-
Primär (i.d.R. der Absenden-Button)	btn-primary
Warnung (z.B. Abbrechen-Button)	btn-warning
Achtung (z.B. Löschen-Button)	btn-danger

<button type="button" class="btn btn-default">OK</button>
<button type="submit" class="btn btn-primary">Absenden</button>
<button type="submit" class="btn btn-success">Bestätigen</button>
<button type="button" class="btn btn-warning">Abbrechen</button>
<button type="button" class="btn btn-danger">Löschen</button>

Um Eingabefelder und deren zulässige Werte zu beschreiben, kann darunter ein Hilfetext platziert werden. Das hierfür zu verwendende small-Element folgt im HTML direkt auf das zugehörige Eingabefeld und benötigt die CSS-Klassen form-text für die korrekte Ausrichtung und text-muted für eine dezente Farbgebung.

Wichtig ist, dass das Hilfe-Element mit einer ID versehen wird, auf die das zugehörige Eingabefeld mit aria-describedby verweisen kann. Mit dieser Zuordnung wird die Barrierefreiheit gewährleistet.

Allgemeine Hilfetexte in Form von Paragraphen können an einer beliebigen Stelle im Formular platziert werden und benötigen nur die CSS-Klasse help-block.

<input id="pass" name="pass" type="password" class="form-control" aria-describedby="pass_help" />
<small id="pass_help" class="form-text text-muted">
    Das Passwort mit einer Mindestlänge von 8 Zeichen muss neben Buchstaben in Groß- und Kleinschreibung auch Zahlen enthalten.
</small>