Forms
Formulare können aus fünf Elementen bestehen. Diese können kombiniert werden, je nach Bedarf:
- Überschrift
- Eingabefeld
- Dropdown
- Re-captcha checkbox
- Button/Schlatfläche
Beispiel für Kontaktformular
Die Elemente sind vertikal nach Themen gruppiert, zum Beispiel:
a. Überschrift und Unterüberschrift des Formulars
b. Thema und Nachricht
c. Kontaktdetails
d. Beispiel für einen Fehlerzustand eines Eingabefeldes
e. Kontrollkästchen für erneutes Captcha
f. Reset-Taste und Submit-Taste
Eingabefelder können auch horizontal gruppiert werden, um verwandte Daten zu identifizieren, z. Straße und Hausnummer oder Postleitzahl und Ort. Das gesamte Formular umfasst 8 Spalten, die in den drei größten Ansichtsfenstern zentriert sind.
a. Überschrift und Unterüberschrift des Formulars
b. Thema und Nachricht
c. Kontaktdetails
d. Beispiel für einen Fehlerzustand eines Eingabefeldes
e. Kontrollkästchen für erneutes Captcha
f. Reset-Taste und Submit-Taste
Eingabefelder können auch horizontal gruppiert werden, um verwandte Daten zu identifizieren, z. Straße und Hausnummer oder Postleitzahl und Ort. Das gesamte Formular umfasst 8 Spalten, die in den drei größten Ansichtsfenstern zentriert sind.
Eingabefeld
Das Eingabefeld ist in 3 Größen erhältlich:
a. Groß (Größe L, 8 Spalten)
b. Medium (Größe S, 4 Spalten)
e. Klein (Größe XS, 3 Spalten)
Mittlere und kleine Eingabefelder können miteinander kombiniert werden, z. zwei mittlere Felder oder ein mittleres und ein kleines Feld in einer Reihe (siehe Beispielformular).
Jedes Eingabefeld hat drei Zustände:
a. Standard
b. Ausgefüllt
d. Error
c. Es kann mit einem Titel und einem zusätzlichen Hinweis kombiniert werden, um das Thema des Feldes im Detail zu erklären.
a. Groß (Größe L, 8 Spalten)
b. Medium (Größe S, 4 Spalten)
e. Klein (Größe XS, 3 Spalten)
Mittlere und kleine Eingabefelder können miteinander kombiniert werden, z. zwei mittlere Felder oder ein mittleres und ein kleines Feld in einer Reihe (siehe Beispielformular).
Jedes Eingabefeld hat drei Zustände:
a. Standard
b. Ausgefüllt
d. Error
c. Es kann mit einem Titel und einem zusätzlichen Hinweis kombiniert werden, um das Thema des Feldes im Detail zu erklären.
Dropdown
a. Im Ausgangszustand ist die Dropdown-Liste geschlossen, der Pfeil zeigt nach unten.
Die Dropdown-Liste kann entweder für verwendet werden
b. einzelne Wahl
c. oder Mehrfachauswahl
Im aktiven Zustand zeigt der Pfeil nach oben, die Maus über der Farbe ist dunkelgrau und ausgewählte Elemente werden in Unternehmensfarbe angezeigt. Solange nichts ausgewählt ist, wird der Button der Multiple-Choice-Version (siehe c) inaktiv in grau angezeigt. Sobald der Benutzer ein Element auswählt, ändert sich die Schaltfläche in die Unternehmensfarbe der Site.
Wenn mehr als sechs Elemente angezeigt werden sollen, wird rechts eine Bildlaufleiste eingefügt.
Die Dropdown-Liste kann entweder für verwendet werden
b. einzelne Wahl
c. oder Mehrfachauswahl
Im aktiven Zustand zeigt der Pfeil nach oben, die Maus über der Farbe ist dunkelgrau und ausgewählte Elemente werden in Unternehmensfarbe angezeigt. Solange nichts ausgewählt ist, wird der Button der Multiple-Choice-Version (siehe c) inaktiv in grau angezeigt. Sobald der Benutzer ein Element auswählt, ändert sich die Schaltfläche in die Unternehmensfarbe der Site.
Wenn mehr als sechs Elemente angezeigt werden sollen, wird rechts eine Bildlaufleiste eingefügt.
Buttons/Schaltflächen
Schaltflächen werden rechtsbündig eingefügt, um den Lesefluss zu unterstützen.
a. Die Schaltfläche zum Zurücksetzen bleibt inaktiv, solange im Formular nichts bearbeitet wird.
b. Die Schaltfläche "Senden" wird in der Symbolversion verwendet, um zu verdeutlichen, dass dies der Hauptaktionsaufruf ist.
a. Die Schaltfläche zum Zurücksetzen bleibt inaktiv, solange im Formular nichts bearbeitet wird.
b. Die Schaltfläche "Senden" wird in der Symbolversion verwendet, um zu verdeutlichen, dass dies der Hauptaktionsaufruf ist.
Links: Die Kontaktkachel verhält sich in allen Versionen für die drei größten Ansichtsfenster gleich.
Rechts: Nur das kleinste Ansichtsfenster zeigt es in einer Breite von 12 Spalten an.
Rechts: Nur das kleinste Ansichtsfenster zeigt es in einer Breite von 12 Spalten an.
Verwandte Themen