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.
Die spezialisierten Eingabefelder reagieren auf CSS und machen falsche Eingaben direkt sichtbar – noch so eine kleine Unterstützung für den User mit minimalem Aufwand.
input:invalid {
background-color: #ffdddd;
}
input type color
Die immergrünen Browser unterstützen die vorbereiteten Eingabefelder im breiten Rahmen, aber dennoch muss man auf kleine Variationen und große Unterschiede vorbereitet sein.
<input type="color" value="">
Die Browser verlangen eine Hex-Farbe im Format #ccddee. Das kleine Eingabefeld für Farbe läßt sich mit wenig CSS umgestalten: Formulare mit CSS gestalten.
Die modernen Browser spielen bei einem Klick / Touch einen Farbpicker ein – da werden keine Javascript- / jQuery-Plugins mehr gebraucht.
input type="email"
<input type="email" value="">
Browser, die den input type=email unterstützen, validieren das Eingabefeld automatisch. Emailadressen dürfen z.B. nicht mit einer Ziffer anfangen und verlangen ein »@«, aber keine Länderkennung. Sie prüfen die Landeskennung nicht, denn es gibt schlichtweg zu viele.
Hier wirkt ebenfalls die Zeile CSS, um dem Benutzer ein "OK" zu signalisieren.
input:invalid {
background-color: #ffdddd;
}
number
Die Browser akzeptieren nur negative oder positive Zahlen. Safari erlaubt dazu Punkt / Komma und Nachkommastellen.
<input type="number" value="">
range
input type="range" kann viele viele Radio-Buttons auf kleinem Raum ersetzen, wird zum Lautstärkenregler oder ändert Helligkeit und Farbe stufenlos.
<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.
search
<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.
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".
tel
Die Browser geben anders als bei email oder url kein spezielles Format vor, denn Telefonnummern variieren zu stark. Im Grunde genommen wirkt input type="tel" also wie input type="text".
Auf einem mobilen Gerät öffnen sie allerdings eine numerische Tastatur, die für die Eingabe von Telefonnummern optimiert ist.
<input type="tel" value="">
url
<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 https:// vor den Textstring, wenn https:// nicht angegeben wurde.
Was bringt ein spezielles input type …?
Es gibt zwar keinen sicheren konsistenten Support für date, color, time, usw., aber da Browser ohne Support auf input type="text" zurückfallen, schadet der Einsatz auch nicht. Dafür bekommen die modernen Browser, die type color, date, month, datetime, week unterstützen, einen sogen. »Picker« – hilfreich vor allem bei input type="date" (Kalender) und type="color" (Farbfelder).
Die spezialisierten Eingabefelder informieren Nutzer mit modernen Browsern direkt per CSS. Javascript checkValidity zeigt zusätzlich automatisch angepasste Fehlermeldungen. Der Einsatz macht Benutzern die Eingabe komfortabler und sicherer, auch wenn uns die Validierung nicht erspart bleibt.
:invalid { background: #fdd }
:valid { background: #E4F1F9 }
:required { border-color: #800000; border-width: 3px }
Spezielle Eingabefelder und ihre 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.