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.

<input type="text" name="name" autofocus>

<input type="text" name="beruf" placeholder="Bitte Beruf eingeben">

<input type="password" name="passwort">

<input type="email" name="mailform">

<input type="url" name="url" value="http://www.on-design.de">

<input type="tel" name="mailform">

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

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

<input type="date" name="datum">

<input type="time" name="zeit">

<input type="search" name="suchenFinden" >

<input name="farbe" type="color" value="#56aab9">

<input name="pflicht" id="pflicht" required>

Wertzuweisungen:

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

<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