Eingabekontrolle und Eingabehilfe HTML5

Mit HTML5 werden viele neue Input Felder mit dazugehörigen Attributen zur Verfügung gestellt. Einige Felder dienen dazu, die richtige Tastatur auf Smartphones und Tabletts anzuzueigen. Noch nicht alle Browser zeigen alle neue Funktionen an.

Ihr Name: (Vorauswahl)
Der Focus liegt beim Laden der Seite in diesem Input Feld.
<input type="text" name="name" autofocus>

Beruf:
Ein Platzhaltertext wird im Input-Feld angezeigt. Er verschwindet, sobald der User etwas eingibt und erscheint wieder, wenn die Eingabe leer ist.
<input type="text" name="beruf" placeholder="Bitte Beruf eingeben">

Passwort:
Es werden Punkte anstatt der Eingabe angezeigt.
<input type="password" name="passwort">

E-Mail:
Der Browser überprüft die Eingabe auf eine gültige Email Adresse.
Er überprüft nicht, ob es die Email wirklich gibt.
<input type="email" name="mailform">

Website:
Der Browser überprüft auf eine gültige URL.
Er überprüft nicht, ob es die URL wirklich gibt.
<input type="url" name="url" value="http://www.on-design.de">

Telefon:
Die Telefontastatur wird in Smartphones angezeigt.
<input type="tel" name="telefon">

Anzahl:
Eingabe für Zahlen. Mit einem Stepper kann man Werte auswählen.
Der Bereich von bis wird mit den Attributen min max definiert.
Die Schrittweite wird mit dem step Attribut definiert.
Fließkommazahl wird erreicht durch step="0.01" beispielsweise für Euro mit 2 Stellen hinter dem Komma.
<input type="number" min="0" max="10" step="2" value="6" name="numerisch">

Fließkommazahl:
Der User muss anstatt eines Kommas einen Punkt eingeben.
<input type="float" name="kommazahl">

Bereich:
Hier kann mit einem Slider Zahlenwerte auswählen.
Der ausgewählte Wert kann mit Javascript angezeigt werden. siehe hier
<input type="range" min="0" max="10" step="2" value="6" name="umfang">

Datum:
Ein komfortables Auswahlfeld für Datumsanzeigen.
Man kann auch einen Wert vorgeben, nach folgendem Schema:
value="JJJJ-MM-TT"
Nach dem gleichen Schema kann man mit den Attributen min und max den möglichen Bereich der Datumseingabe beschränken.
Leider ist es nicht barrierefrei: Accessibility? 2020 ...enough support? No.
<input type="date" name="datum" value="2023-12-24" min="2020-01-01" max="2030-12-24">

Uhrzeit:
Auswahlfeld für Uhrzeit
<input type="time" name="zeit">

Suchen:
Das Suchfeld unterscheidet sich kaum vom type="text". Es kann je nach Browser etwas anders dargestellt werden.
<input type="search" name="suchenFinden" >

Farbe:
Komfortables Auswahlfeld für Farbwerte. Es wird in den Browsern unterschiedlich dargestellt.
<input name="farbe" type="color" value="#56aab9">

Pflichtfeld:
Das Attribut required definiert ein Pflichtfeld.
Beim Abschicken des Formulars überprüft der Browser, ob in diesem Feld eine Eingabe gemacht wurde und gibt eventuell einen Hinweis aus.
<input name="pflicht" id="pflicht" required>

Absenden:

Wertzuweisungen:

Bei numerischen Wertzuweisungen kann man die Werte durch folgende Attribute genau definieren und eingrenzen.

value=Startwert,
min= niedrigster Wert,
max = höchster Wert,
step = Sprungwert

<input type="range" min="0" max="10" step="2" value="6" name="numerisch">

Datumsangaben
value="2014-10-25"
Die Form ist: JJJJ-MM-TT

Uhrzeitangaben:
value="14:43"
Die Form ist HH:MM oder wenn auch Sekunden benötigt werden: HH:MM:SS oder optional kann man auch einen dreistelligen Millisekundenangabewert nach einem Punkt einfügen HH:MM.mmm

Datums und Uhrzeitangaben mit Zeitzone:
value="2014-03-29T14:49:30+0100"
Diese Format: JJJJ-MM-TT dann kann man ein T anhängen um eine Zeitangabe anzufügen nach dem Schema HH:MM:SS anschließend kann man den Zeitzonenversatz anfügen, für unsere Zeitzone ist das +0100.

URL-Adressen:
value="http://www.on-design.de"
Geben Sie ein absolute Adress ein.

Email-Adresse:
value="ebrief@pipilangsocke.de"

Monatsangaben:
value="2003-03"
Form: JJJJ-MM

Kalenderwoche:
value="2014-42"
Form: JJJJ-WW
Kalenderwochen beginnen mit Montag ein Jahr hat maximal 53 Kalenderwochen in einigen Jahren auch nur 52 Wochen.

Farbangaben:
value="#FF03A4"
Geben Sie einen gültigen Hexadezimalwert nach dem Gatterzeichen ein.

Zahlenangaben:
value="-323" value="0.345" value="3.490e+18" Das erste Beispiel ist eine Minuszahl.
Das zweite Beispiel eine Kommazahl.
Das dritte Beispiel ist Zahl in Exponentialschreibweise, möglich ist: e+ E+ e- E-

Deaktivieren von Formularelementen

Standalone Attribut readonly

Mit dem Standalone Attribut readonly = nur lesen kann man ein Eingabefeld deaktivieren, so dass der User keine Eingaben mehr machen kann. Das ist vor allen Dingen bei dynamischen beispielsweise mit Javascript unterstützten Formularen sinnvoll. Wenn der User beispielsweise einen Artikel nicht ausgewählt hat, können die Eingabefelder zur Farbauswahl des Artikels deaktiviert also ausgegraut werden. Siehe dazu meinen Javascript Tipp

Eingabehilfen Tabulatorreihenfolge Accesskey

siehe Tabulatorreihenfolge und Accesskey

Autofocus

Durch das standalone Attribut autofocus wird ein Feld bestimmt, welches beim Laden der Seite den Focus erhält.

Platzhaltertext

Mit dem Attribut placeholder="Geben Sie hier was ein." Können Sie in dem Eingabefeld einen Text vorgeben, der angezeigt wird, wenn nichts eingegeben wurde.

Autovervollständigung

Die Autovervollständigungsfunktion der Browser kann man mit autocomplete="off" unterdrücken. Mit autocomplete="on" kann man sie wieder aktivieren. Man kann dieses Attribut sowohl in einem Eingabefeld also auch im einleitenden form- Tag einfügen. Im einleitenden form- Tag wirkt sich die Funktion auf alle Eingabefelder innerhalb des Formulars aus.