CSS, HTML und Javascript mit {stil}

input autocomplete, focus, placeholder, search

HTML fieldset

input type color, range, datetime, number und email verbessern die Schnittstelle zum Benutzer durch Eingabehilfen für Farben, Datum und Uhrzeit oder mit regulären Ausdrücken.

Eingabegeräte wie iPad, iPhone und Android-Geräte unterstützen das schlichte Eingabefeld durch eine passende Tastatur.

Die neuen input-Tags können durchaus eingesetzt werden, auch wenn ältere Browser sie nicht erkennen. IE 8 zeigt HTML5-Eingabefelder wie color oder search wie input-Tags vom Typ "text" an und liefert die eingegebenen Daten ohne Validierung als Type "text" aus.

iPad, iPhone und Android-Geräte zeigen je nach Eingabetyp eine angepasste Tastatur, damit der Benutzer z.B. nicht erst auf die numerische Tastatur umschalten muss, um eine Zahl einzugeben. Bei date, datetime-local und month erscheinen Kalender und macht die Eingabe von Datum und Zeit einfacher.

iPad-Tastatur für Texteingaben
Normale iPad-Tastatur für input type="text"
iPad-Tastatur für numerische Eingaben
iPad-Tastatur für input type="number"

Unter den Desktop-Browsern unterstützen Chrome und Opera die HTML5-Formularfelder am besten und zeigt bei input type="color" Farbfelder an. Bei Datum und Uhrzeit spendieren Opera und Chrome einen kleinen Kalender, wie wir ihn sonst über jQuery holen.

Auch bei wenig Support für Input vom Typ date, datetime-local, month und time auf dem Desktop lohnt sich also der Einsatz eines speziellen input type.

Input Types

1color

Markup
<input type="color" value="">

Die Browser verlangen eine Hex-Farbe im Format #ccddee. Chrome und Opera spielen einen Farbwähler ein.

2date

Markup
<input type="date" value="">

Eingabefeld vom Typ Datum: Die Browser verlangen eine Eingabe im Format tt.mm.jjjj. Chrome und Opera spielen beim Klick / Touch auf das Dreieck einen Kalender ein, wie wir ihn z.B. von jQuery kennen

3datetime-local

Markup
<input type="datetime-local" value="">

Der ältere input type="datetime" wurde aus dem Standard entfernt. Anstelle dessen steht jetzt datetime-local. Unterstützt von Chrome und Opera.

4email

Markup
<input type="email" value="">

Browser, die den input-Type email bereits unterstützen, validieren das Eingabefeld automatisch und verlangen ein »@« und eine Landeskennung. Die Browser prüfen allerdings nicht, ob es sich um eine valide Landeskennung (z.B. .com oder .de) handelt.

5month

Markup
<input type="month" value="">

Chrome und Opera: Monat Jahr August 2016. Die Browser akzeptieren nur Eingaben im Format mmmmmm yyyy

6number

Markup
<input type="number" value="">

Die Browser akzeptieren nur ganze negative oder positive Zahlen. Bei allen anderen Eingaben löschen sie das Feld, wenn das Eingabefeld den Fokus verliert.

7range

Markup
<input type="range" min="-5" max="5" step="1.0">

Safari, Chrome und Opera: Ein Regler oder »Slider«.

Bei type="range" sitzt der Regler per Default am Anfang in der Mitte. Ein bestimmter Anfangswert wird mit value – z.B. value="-5" gesetzt.

8search

Markup
<input type="search" value="">

Safari, Chrome und Opera zeigen das Eingabefeld mit abgerundeten Ecken und ersparen ein paar Zeilen CSS. In Zukunft können die Browser weitere Funktionen type="search" stecken: z.B. die letzten Suchbegriffe anbieten.

9tel

Markup
<input type="tel" value="">

10time

Markup
<input type="time" value="">

Safari, Chrome und Opera: Uhrzeit in der Form 08:42

11url

Markup
<input type="url" value="">

Die Browser verlangen eine Eingabe im Format http://domainname. Das Verhalten der Browser ist nicht konsistent: In IE fällt das Eingabefeld vom Typ url zurück zu einem einfachen Textfeld, Opera setzt automatisch ein http:// vor den Textstring, wenn http:// nicht angegeben wurde.

12week

Markup
<input type="week" value="">

Chrome und Opera: Woche des Monats als Zahl, z.B. Woche --, ----

Auf dem iPad zeigen sowohl Safari als auch Chrome input type=week nicht korrekt an und das Eingabefeld ist unbrauchbar.

Safari beschränkt das CSS für input type="search", so dass die meisten Stile (padding, font-family, border, background) keine Wirkung zeigen und nicht einmal eine !important-Anweisung Wirkung zeigt.

Nur wenige Eigenschaften, darunter color, text-align, width und letter-spacing beeinflußen die Darstellung der Eingabe in Suchfelder. Als Schriftgrößen lässt Safari nur small, medium und large gelten.

-webkit-appearance: none;

unterdrückt das Apple-CSS und das Eingabefeld sieht aus wie ein normales Eingabefeld mit type="text".

Was bringt ein spezielles input type …

Es gibt zwar keinen konsistenten Support für date, color, time, usw., aber da Browser ohne Support auf input type="text" zurückfallen, schadet der Einsatz auch nicht.

Die spezialisierten Eingabefelder helfen in keiner Weise bei der Validierung von Formularen, aber sie helfen dem Benutzer und vereinfachen die Eingabe dort, wo die Browser tatsächlich Support für die jeweiligen Eingabefelder bieten. Schon dafür alleine lohnt sich der Einsatz.

Das CSS für Eingabefelder verbessert den Support noch weiter, aber aufgrund des inkonsistenten Supports muss hier weiterhin Javascript eingesetzt werden, damit der Benutzer schnell eine Reaktion vom Browser erfährt.

:invalid { background: #fdd }
:valid { background: #E4F1F9 }
:required { border-color: #800000; border-width: 3px }