Formulare

Form Fields

Formulare sind Eingabefelder auf Webseiten, um User:innen-Informationen entgegenzunehmen und zu speichern.

Es wird dabei von der Art des Form-Fields und der Input-Types unterschieden.

Form Elements

Es gibt das einfache Input Field oder das Select oder Multi-Select Field sowie das Text-Field für längere Nachrichten.

Input Types

Es gibt eine grosse Auswahl an Input Types. Vom einfachen Textfeld über den Submit Button oder der Eingabe von Datum oder Passwort.

Video über Formfields
© Webdesign Essentials

Überblick: Input Types

Text

Einfacher Text. Einzeilig.

Password

Bei der Eingabe des Passworts wird die Eingabe durch :::: ersetzt.

Submit-Button

In Formularen werden Buttons genutzt, um ein Formular zu versenden oder zu speichern.

Reset-Button

Ein Button, welche die Form Field Eingaben wieder zurück an den Anfang setzt.

Radio Button

Bei Radio-Buttons kann immer nur eine Option gewählt werden.

Checkbox

Bei der Checkbox können mehrere Optionen gewählt werden.

Range/Slider

Statt
eines Dropdowns oder Select-Box kann man verschiedene Optionen auch als
Regler darstellen. Es funktioniert wie der Radio Button.

Color

Gibt der User:in die Möglichkeit eine Farbe auszuwählen. Öffnet die OS unterstützte Browserpalette

Date Picker

Datumsauswahl. Es kann auch mit Zeit oder nur mit Wochen oder Monaten versehen sein.

E-Mail

Validiert, ob in der Eingabe die Syntax einer E-Mail-Adresse stimmt. Sprich Text vor dem @ nach dem @ und danach mit einem Punkt und einer Top-Level-Domain versehen: muster@muster.com

Number

Ermöglicht nur Eingabe von Zahlen. Aktiviert bei gewissen Mobilen Betriebssystemen die Nummern-Tastatur.

Search

Ein Texteingabefeld, das ein (X) am Ende hat um die Eingabe wieder zu löschen.

Tel

Eingabe der Telefonnummer mit der Syntax einer Telefonnummer.

URL

Eingabe einer URL mit der Syntax einer URL. Manche Mobilen-Betriebssysteme zeigen das .com in der Tastatur.

Vertiefe dich ins ganze Kapitel

Anatomie einer Webseite