Hauptinhalt

Erweitertes Anfrageformular

Mit Hilfe von Auswahllisten, Checkboxen, Radios und weiteren erweiterten Eingabefeldtypen können komplexe Formulare aufgebaut werden, dich sich sowohl horizontal, als auch kompakt vertikal ausrichten lassen.

Horizontale Ausrichtung

Um Formulare mit vielen Elementen übersichtlicher zu gestalten, bietet sich eine horizontale Ausrichtung an. Dabei werden Labels neben ihren zugehörigen Eingabefeldern angezeigt, statt darüber. Hierfür muss dem form-Element lediglich die CSS-Klasse form-horizontal zugewiesen werden.

Kurze Eingabefelder wie Straße und Hausnummer oder Ort und Postleitzahl können auch benachbart angeordnet werden. Die Elemente müssen hierfür in einem Element der CSS-Klasse form-group gruppiert werden. Standardmäßig nehmen benachbarte Felder dabei die gleiche Breite ein, wobei das Verhältnis mit form-group-horizontal-2-1 angepasst werden kann.

<form action="#" class="form-horizontal" data-component="form-1254468">
    <legend>Beispiel: Adresse</legend>
    <fieldset>
        <legend>Kontakt</legend>
        <div class="form-group">
            <label class="control-label" for="name">Vorname *</label>
            <div class="form-group-content">
                <input id="name" name="text" type="text" placeholder="" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="surname">Name *</label>
            <div class="form-group-content">
                <input id="surname" name="text" type="text" placeholder="" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group form-group-horizontal-2-1">
            <label class="control-label" for="address_street">Straße</label>
            <div class="form-group-content">
                <input id="address_street" name="text" type="text" placeholder="" class="form-control" />
            </div>
            <label class="control-label" for="address_number">Nummer</label>
            <div class="form-group-content">
                <input id="address_number" name="number" type="text" placeholder="" class="form-control" />
            </div>
        </div>
        <div class="form-group form-group-horizontal-2-1">
            <label class="control-label" for="address_street">Ort</label>
            <div class="form-group-content">
                <input id="address_city" name="text" type="text" placeholder="" class="form-control" />
            </div>
            <label class="control-label" for="address_number">PLZ</label>
            <div class="form-group-content">
                <input id="address_zip" name="text" type="text" placeholder="" size="6" class="form-control" />
            </div>
        </div>
    </fieldset>
</form>
Beispiel: Adresse
Kontakt

Zahl- und Datumauswahl

Eingabehilfen wie Pfeiltasten bei Nummernfeldern oder Kalenderauswahl bei Datumsfeldern werden bei modernen Browser anhand des type-Attributs wie number bzw. date automtisch bereitgestellt. Browserunabhängige, JavaScript-basierte Eingabehilfen sind also nicht Teil des Styleguides.

<div class="form-group">
    <label class="control-label" for="date">Termin</label>
    <div class="form-group-content">
        <input id="date" name="date" type="date" value="2018-02-28" class="form-control" readonly aria-describedby="date_help" />
        <small id="date_help" class="form-text text-muted">
            Der nächst mögliche Termin wurde autom. vorausgewählt.
        </small>
    </div>
</div>
<div class="form-group">
    <label class="control-label" for="date_alt">Alternativtermin</label>
    <div class="form-group-content">
        <input id="date_alt" name="date_alt" type="date" class="form-control" aria-describedby="date_alt_help" />
        <small id="date_alt_help" class="form-text text-muted">
            Sollte zum gewählten Termin kein Platz mehr frei sein, werden Sie zum alternativen Termin angemeldet.
        </small>
    </div>
</div>
<div class="form-group">
    <label class="control-label" for="number">Anzahl der Begleitpersonen</label>
    <div class="form-group-content">
        <input id="number" name="number" type="number" placeholder="Anzahl" class="form-control" />
    </div>
</div>
Beispiel: Zahlen und Daten
Der nächst mögliche Termin wurde autom. vorausgewählt.
Sollte zum gewählten Termin kein Platz mehr frei sein, werden Sie zum alternativen Termin angemeldet.

Auswahllisten

Die als Drop-Downs dargestellten Select-Elemente erfordern kein besonderes HTML. Um eine Mehrfachauswahl mit Checkboxen innerhalb der DropDown zu ermöglichen, muss lediglich das Attribut multiple ergänzt werden.

<fieldset>
    <legend>Einfache Auswahl</legend>
    <div class="form-group">
        <label class="control-label" for="select-single">Interessengebiete</label>
        <div class="form-group-content">
            <select id="select-single" name="select-single" class="form-control" aria-describedby="interests_help">
                <option value="1">Verwaltung</option>
                <option value="2">Wirtschaft</option>
                <option value="3">Recht</option>
                <option value="4">Marketing</option>
                <option value="5">Arbeitsschutz</option>
                <option value="6">Kunst & Kultur</option>
                <option value="7">Bildung</option>
                <option value="8">Wissenschaft</option>
                <option value="9">Umwelt und Landwirtschaft</option>
            </select>
            <small id="interests_help" class="form-text text-muted">
                Keine Mehrfachauswahl möglich
            </small>
        </div>
    </div>
</fieldset>
<fieldset>
    <legend>Mehrfache Auswahl</legend>
    <div class="form-group">
        <label class="control-label" for="interests">Interessengebiete</label>
        <div class="form-group-content">
            <select id="interests_multi" name="select-multiple" class="form-control btn-group" multiple aria-describedby="interests_multi_help">
                <option value="1">Verwaltung</option>
                <option value="2">Wirtschaft</option>
                <option value="3">Recht</option>
                <option value="4">Marketing</option>
                <option value="5">Arbeitsschutz</option>
                <option value="6">Kunst & Kultur</option>
                <option value="7">Bildung</option>
                <option value="8">Wissenschaft</option>
                <option value="9">Umwelt und Landwirtschaft</option>
            </select>
            <small id="interests_multi_help" class="form-text text-muted">
                Mehrfachauswahl möglich
            </small>
        </div>
    </div>
</fieldset>
Beispiel: Auswahllisten
Einfache Auswahl
Keine Mehrfachauswahl möglich
Mehrfache Auswahl
Mehrfachauswahl möglich

Checkboxen und Radios

<fieldset>
    <legend>Einfache Darstellung</legend>
    <div class="form-group">
        <strong class="control-label">Catering</strong>
        <div class="form-group-content">
            <div class="checkbox">
                <label><input type="checkbox" name="checkbox-1-1" /><span>Mittagessen</span></label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="checkbox-1-2"/><span>Kaffee</span></label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="checkbox-1-3"/><span>Abendessen</span></label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <strong class="control-label">Parallele Seminare</strong>
        <div class="form-group-content">
            <div class="radio">
                <label><input type="radio" name="radio-1" /><span>Feinstaub, nein danke: Wie unsere Bürgerinnen und Bürger wieder frei atmen können</span></label>
            </div>
            <div class="radio">
                <label><input type="radio" name="radio-1" /><span>Die Zukunft von gestern schon heute</span></label>
            </div>
            <div class="radio">
                <label><input type="radio" name="radio-1" /><span>Papierloses Büro – Utopie oder Wirklichkeit?</span></label>
            </div>
        </div>
    </div>
</fieldset>
<fieldset>
    <legend>Slider-Darstellung</legend>
    <div class="form-group">
        <strong class="control-label">Zusatzangebote</strong>
        <div class="form-group-content">
            <div class="checkbox">
                <label><input type="checkbox" name="checkbox-2-1" /><span class="switch-slider"></span><span>Führung</span></label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="checkbox-2-2" /><span class="switch-slider"></span><span>WLAN</span></label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <strong class="control-label">Anreise</strong>
        <div class="form-group-content">
            <div class="radio">
                <label><input type="radio" name="radio-2" /><span class="switch-slider"></span><span>Öffentliche Verkehrsmittel</span></label>
            </div>
            <div class="radio">
                <label><input type="radio" name="radio-2" /><span class="switch-slider"></span><span>Fahrrad</span></label>
            </div>
            <div class="radio">
                <label><input type="radio" name="radio-2" /><span class="switch-slider"></span><span>Auto</span></label>
            </div>
        </div>
    </div>
</fieldset>
Beispiel: Checkboxen und Radios
Einfache Darstellung
Catering
Parallele Seminare
Slider-Darstellung
Zusatzangebote
Anreise
zurück zum Seitenanfang