input Types – spezielle Eingabefelder
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.
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 Type von color bis search
1color
<input type="color" value="">
Die Browser verlangen eine Hex-Farbe im Format #ccddee. Chrome, Opera, Safari und Firefox spielen einen Farbwähler ein.
2date
<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
<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
<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
<input type="month" value="">
Chrome und Opera: Monat Jahr August 2016. Die Browser akzeptieren nur Eingaben im Format mmmmmm yyyy
6number
<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
<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
<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
<input type="tel" value="">
10time
<input type="time" value="">
Safari, Chrome und Opera: Uhrzeit in der Form 08:42
11url
<input type="url" value="">
Die Browser verlangen eine Eingabe im Format https://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
<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 }
Spezielle input types und Darstellung
Bei der Darstellung der Eingabefelder wie input type="color", type="color" oder type="search" muss das CSS in besonderer Weise eingreifen, denn jeder Browser hat eine abweichende Darstellung der speziellen Eingabefelder.
U.U. überschreiben die Browser auch das Placeholder-Attribut (z.B. durch das Farbfeld bei type="color" oder die Maske für die Eingabe des Datums in Chrome / Firefox) Darum sitzt dort kein placeholder-Attribut.