Datentypen, Wertebereiche usw. definiert werden, denen Eingaben genügen müssen. Dieser Ansatz verspricht eine bequeme, häufig dialoggesteuerte Dateneingabe für Anwender und erleichtert die Entwicklerarbeit bei der Formularverarbeitung. Jedoch wird er erst dann die serverseitige Datenprüfung ersetzen können, wenn nur noch HTML5-fähige Browser im Umlauf sind. Die Usability von Formularen umfasst aber noch weitere Formen der Eingabeunterstützung. Beispielsweise Funktionen wie Autovervollständigung, Platzhalterinhalte oder das kontextabhängige Deaktivieren nicht benötigter Felder. Auch das Erzwingen von Eingaben in Pflichtfeldern gehört dazu. 8.3.1 Feldtypen für kontrollierte Eingaben Einzeilige Eingabefelder werden bei allgemeinem Inhalt durch
markiert. Eine spezielle, schon lange existierende Form ist die Variante
, wobei die Eingaben verdeckt dargestellt werden. HTML5 stellt diesen beiden eine Reihe weiterer Typen an die Seite. Einige dieser Typen werden im Browser wienormale Texteingabefelder dargestellt. Sie lassen jedoch nur bestimmte Zeichen oder ein bestimmtes Zeichenfolgenformat zu. Andere der neuen Typen können auch als moderne Kombinationsfelder dargestellt werden, etwa die Feldtypen für Datumsauswahl. Nachfolgende Tabelle listet die in HTML5 neu eingeführten Typen, ihre Bedeutung und die Untersützung durch Browser auf. Zum Zeitpunkt der Drucklegung des Buches unterstützte der Internet Explorer 9 keinen der neuen Feldtypen.
Beispiel
Erläuterung Im Beispielformular kommt eine Reihe von Feldtypen für bestimmte Arten von Daten vor. Durch das type -Attribut wird der Feldtyp bestimmt. Alle in HTML5 neu hinzugekommenen Feldtypen können ebenso wie herkömmliche Formularfelder ein name -Attribut erhalten und mit Hilfe des value -Attributs vorbelegte Werte erhalten. Im Zusammenhang mit type="range" können Sie mit den weiteren, neuen Attributen min , max und step den gewünschten Wertebereich und die darin möglichen Werte markieren. Mit min geben Sie den unteren Wert des Bereichs an, mit max den oberen. Mit step bestimmen Sie die Schrittweite ( step = Schritt). Die Attribute min und max sind aber auch bei anderen Feldtypen erlaubt, wo eine Bereichseingrenzung sinnvoll sein kann, etwa bei type="date" . Denn ein Geburtsdatum wie 23.10.1691 ist zwar formal korrekt, aber nicht realistisch. Mit min können Sie ein frühestmögliches Geburtsdatum bestimmen, mit max ein spätestmögliches. Die neue Auszeichnung
erzeugt ebenso wie
ein einzeiliges Eingabefeld. Der Unterschied besteht darin, dass die Eingabe vom Browser gegen einen regulären Ausdruck geprüft werden soll. Im obigen Beispiel wird mit pattern="[0-9]{5}" die Eingabe einer genau fünfstelligen Postleitzahl erzwungen. Beachten Sie, dass der reguläre Ausdruck so formuliert sein muss, dass er die gesamte Eingabe abdeckt und nicht nur einen Teil davon. Notieren Sie den regulären Ausdruck ohne Begrenzerzeichen wie / … / . Das bedeutet aber auch, dass keine sogenannten Modifyer wie etwa der ignore-case -Modifyer möglich sind. Die HTML5-Spezifikation fordert, bei Verwendung des pattern -Attributs in einem input -Element ="…"> zugleich das globale Attribut title="…"> zu verwenden. Notieren Sie als Wertzuweisung an dieses Attribut eine kurze Beschreibung des erlaubten Inhalts. Die Beschreibung wird, wenn die Maus über das Feld bewegt wird, als Tooltipp-Fenster angezeigt. Visualisierung im Browser Zum Redaktionszeitpunkt war die Implementierung der neuen HTML5-Feldtypen in den Browsern bereits fortgeschritten, trotzdem können nur
Kostenlos Online Lesen 
