Formular

Headline

Die Formular-Headline dient der Formatierung von Überschriften in Formularen. Sie entspricht optisch weitgehend der headline75.

Registrierung

Text

Der Formular-Text dient der Formatierung von ein- oder mehrzeiligen Texten in Formularen. Er entspricht optisch weitgehend der copy100.

Bitte geben Sie nachfolgend Ihre Daten ein.

Label

Das Formular-Label kann zur Beschriftung von Eingabefeldern und anderen Formularelementen eingesetzt werden.

Es kann optional mit einem Eingabefeld verlinkt werden, so dass der Cursor bei einem Klick auf das Label direkt in das Eingabefeld springt.

Einzelnes Label

Kombinierte Label

/

Eingabefeld

Das einzeilige Eingabefeld dient dazu, Tastatureingaben vom Nutzer entgegen zu nehmen, die mit einem Formular abgeschickt werden können. Es kommt vor allem bei der Abfrage von persönlichen Daten wie Namen, E-Mail-Adressen, Telefonnummern, Adressen oder Passwörtern zum Einsatz.

Je nach vorgesehenem Inhalt können die Eingabefelder mit verschiedenen Typen versehen werden:

  • "Text": Es können beliebige Zeichen eingegeben werden.
  • "E-Mail: Öffnet auf den meisten Mobilgeräten eine spezielle Tastatur, die sich besonders für die Eingabe von E-Mail-Adressen eignet. Manche Browser validieren zudem, ob das Format der Eingabe einer E-Mail-Adresse entspricht.
  • "Passwort": Die eingegeben Zeichen werden mit Sternchen maskiert, so dass die Eingabe nicht sichtbar ist.
  • "Zahl": Es können nur Zahlen eingegeben werden. Auf den meisten Mobilgeräten wird zudem eine Zahlentastatur geöffnet, die sich besonders für die Eingabe von Zahlen eignet. Dieser Typ eignet sich zum Beispiel für Postleitzahlen. Aber Achtung! Nicht für Hausnummern verwenden, da hier neben Ziffern auch Buchstaben (z.B. 15A) eingegeben werden müssen.
  • "Telefonnummer": Öffnet auf den meisten Mobilgeräten eine spezielle Zahlentastatur, die sich besonders für die Eingabe von Telefonnummern eignet. Aber Achtung! Je nach Browser können damit keine Buchstaben eingeben werden.

Darüber hinaus gibt es noch folgende ergänzende Möglichkeiten, die Eingabefelder zu konfigurieren:

  • Platzhalter: Ein als Platzhalter definierter Text steht in grauer Schrift im Eingabefeld, bis die erste Eingabe durchgeführt wurde.
  • optional: Das Eingabefeld wird durch den Platzhaltertext "(Optional)" als optional gekennzeichnet. Die Prüfung auf Pflichtfelder und optionale Felder ist aber selbst zu implementieren.
  • deaktiviert: Das Eingabefeld wird grau hinterlegt, so dass keine Eingaben möglich sind.
  • automatische Großschreibung: Der erste Buchstabe eines jeden Wortes wird auf iOS-Geräten automatisch großgeschrieben (nur in Kombination mit einem Eingabefeld vom Typ "Text" sinnvoll).
  • mit Leeren-X: Rechts im Eingabfeld wird ein "X" angezeigt, mit dem man das Feld leeren kann.
  • Visualisierung einer Warnung: Das Eingabefeld wird gelb hervorgehoben, um auf eine Warnung hinzuweisen.
  • Visualisierung eines Fehlers: Das Eingabefeld wird rot hervorgehoben, um auf einen Fehler hinzuweisen.

Typ "Text"

Typ "E-Mail"

Typ "Passwort"

Typ "Zahl"

Typ "Telefonnummer"

mit Platzhalter

optional

deaktiviert

mit automatischer Großschreibung

mit Leeren-Button (X)

mit Visualisierung einer Warnung

mit Visualisierung eines Fehlers

Textarea

Die Textarea ist ein mehrzeiliges Eingabefeld, dessen Inhalt mit einem Formular abgeschickt werden kann. Es findet vor allem dann Einsatz, wenn vom Nutzer längere Textinhalte entgegen genommen werden sollen.

Die Textarea über diese Eigenschaften konfiguriert werden:

  • Platzhalter: Der als Platzhalter definierte Text steht in grauer Schrift in der Textarea, bis die erste Eingabe durchgeführt wurde.
  • deaktiviert: Die Textarea wird grau hinterlegt, so dass keine Eingaben möglich sind.
  • optional: Die Textarea wird durch den Platzhaltertext "(Optional)" als optional gekennzeichnet. Die Prüfung auf Pflichtfelder und optionale Felder ist aber selbst zu implementieren.
  • Visualisierung einer Warnung: Das Textarea wird gelb hervorgehoben, um auf eine Warnung hinzuweisen.
  • Visualisierung eines Fehlers: Das Textarea wird rot hervorgehoben, um auf einen Fehler hinzuweisen.

Standardvariante

mit Platzhalter

optional

deaktiviert

mit Visualisierung einer Warnung

mit Visualisierung eines Fehlers

Auswahlfeld

Das Auswahlfeld ermöglicht es, genau wie der Radio-Button, vom Nutzer eine Option aus einer zuvor definierten Liste an Auswahlmöglichkeiten abzufragen. Listenelemente, die nicht ausgewählt werden dürfen, können deaktiviert werden und werden dann in einem helleren Grau dargestellt.

Das Auswahlfeld kann über diese Eigenschaften zusätzlich konfiguriert werden:

  • deaktiviert: Das Eingabefeld wird grau hinterlegt, so dass keine Eingaben möglich sind.
  • Visualisierung einer Warnung: Das Eingabefeld wird gelb hervorgehoben, um auf eine Warnung hinzuweisen.
  • Visualisierung eines Fehlers: Das Eingabefeld wird rot hervorgehoben, um auf einen Fehler hinzuweisen.

Standardvariante

deaktiviert

mit Visualisierung einer Warnung

mit Visualisierung eines Fehlers

Radio-Button

Der Radio-Button dient in Kombination mit anderen Radio-Buttons genau wie das Auswahlfeld dazu, vom Nutzer eine Option aus einer zuvor definierten Liste an Auswahlmöglichkeiten abzufragen. Im Gegensatz zur Checkbox kann immer nur eine Option gleichzeitig ausgewählt werden. Eine ggf. zuvor gewählte Option wird bei Auswahl einer neuen wieder abgewählt.

Das zu jedem Radio-Button gehörende Label ist Bestandteil des Patterns. Über dieses kann die Auswahl genauso vorgenommen werden wie über das kreisförmige Element. Der Labeltext kann ein- oder mehrzeilig sein.

Der Radio-Button kann über diese Eigenschaften zusätzlich konfiguriert werden:

  • deaktiviert: Der Radio-Button wird grau hinterlegt, so dass keine Auswahl möglich ist.
  • Visualisierung eines Fehlers: Der Radio-Button wird rot hervorgehoben, um auf einen Fehler hinzuweisen.

Standardvariante

deaktiviert

mit Visualisierung eines Fehlers

Checkbox

Mit Hilfe der Checkbox kann eine Auswahl aus einer zuvor definierten Liste an Auswahlmöglichkeiten abgefragt werden. Im Gegensatz zum Radio-Button können dabei aber auch mehrere Checkboxen gleichzeitig ausgewählt werden.

Das zu jeder Checkbox gehörende Label ist Bestandteil des Patterns. Über dieses kann die Auswahl genauso vorgenommen werden wie über das quadratische Element. Der Labeltext kann ein- oder mehrzeilig sein.

Die Checkbox kann über diese Eigenschaften zusätzlich konfiguriert werden:

  • deaktiviert: Die Checkbox wird grau hinterlegt, so dass keine Auswahl möglich ist.
  • Visualisierung eines Fehlers: Die Checkbox wird rot hervorgehoben, um auf einen Fehler hinzuweisen.

Standardvariante

deaktiviert

mit Visualisierung eines Fehlers

Hinweis

Über die Hinweise können dem Nutzer innerhalb des Formulars Informationen in Bezug auf die abgeschickten Daten angezeigt werden.

Es gibt insgesamt fünf Arten von Hinweisen:

  • Nachricht: Eine neutrale Information.
  • Hinweis: Eine etwas hervorgehobenere, neutrale Information.
  • Erfolg: Eine Information über eine erfolgreich durchgeführte Aktion.
  • Warnung: Ein Hinweis auf ein mögliches Problem oder eine andere wichtige Information.
  • Fehler: Eine wichtige Information über ein Problem, das das Ausführen einer gewünschten Aktion verhindert hat.

Die Sprechblasen der Hinweise werden in den Breakpoints S und M mit einem Dreieck nach oben und in den Breakpoints L und XL mit einem Dreieck nach links dargestellt. Der Inhalt eines Hinweises kann ein- oder mehrzeilig sein.

Nachricht

Nachricht! Eine generische lange Nachricht.

Hinweis

Hinweis! Ein generischer langer Hinweis.

Erfolg

Erfolg! Eine generische lange Erfolgsmeldung.

Warnung

Warnung! Eine generische lange Warnung.

Fehler

Fehler! Eine generische lange Fehlermeldung.

Grid

Über das Formular-Grid können die einzelnen Formularbestandteile strukturiert angeordnet werden. Dies beinhaltet zum einen die Ausrichtung der Elemente in Spalten und zum anderen eine Gruppierung der einzelnen Elemente. Durch Gruppierung lassen sich größere Abstände zwischen einzelnen Formularteilen erreichen.

Für die Anordnung in Spalten stehen zwei Optionen zur Verfügung:

  • mit Hinweiskommunikation: Es stehen drei Spalten zur Verfügung: Eine für die Beschriftungen, eine für die Eingabeelemente und eine für die Hinweiskommunikation.
  • ohne Hinweiskommunikation: Es stehen nur die beiden Spalten für die Beschriftungen und die Eingabeelemente zur Verfügung. Diese Variante eignet sich zur Darstellung von Formularen in Layern. In allen anderen Fällen sollte auf die Variante mit Hinweiskommunikation zurückgegriffen werden.

In der Spalte der Eingabeelemente können innerhalb einer Zelle auch mehrere Eingabeelemente stehen. Diese können jeweils so konfiguriert werden, dass sie 25%, 33%, 40%, 50%, 60% oder 70% der zur Verfügung stehenden Breite einnehmen.

mit Hinweiskommunikation (3 Spalten)

Registrierung
Bitte geben Sie nachfolgend Ihre Daten ein.
Eine generische sehr sehr sehr sehr sehr sehr sehr sehr sehr sehr lange Fehlermeldung.
/

Deutschland

Bitte beachten Sie, dass der Versand nur an Adressen innerhalb von Deutschland möglich ist. Wenden Sie sich für Bestellungen außerhalb Deutschlands bitte an die OTTO-Niederlassung in ihrem Land oder einen unserer Partner.

ohne Hinweiskommunikation (2 Spalten)

Registrierung
Bitte geben Sie nachfolgend Ihre Daten ein.
/

Deutschland

Bitte beachten Sie, dass der Versand nur an Adressen innerhalb von Deutschland möglich ist. Wenden Sie sich für Bestellungen außerhalb Deutschlands bitte an die OTTO-Niederlassung in ihrem Land oder einen unserer Partner.

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!