CSS, HTML und Javascript mit {stil}

input type=number, type=date, type=search

Attribute für input-Tags: input type search, input type date

input type number color, datetime 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 die Eingabe durch eine passende Tastatur.

Die speziellen input-Typen können durchaus eingesetzt werden, auch wenn ältere Browser sie nicht erkennen. Browser ohne Support zeigen Eingabefelder wie type=color oder type=search wie input="text" an und liefern die eingegebenen Daten ohne Validierung als Type "text" aus.

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

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 type=date, datetime-local, month und time bei den Desktop-Browsern lohnt sich also der Einsatz eines speziellen input-Typs.

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">

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 bis heute 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 } 
HTML Formulare LOGIN Name Spin ••••••••••••