HTML5 für Webdesigner

Formularfelder für Zahlen, Datums- und Zeitangaben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Formularfelder für Zahlen und spezielle Felder für Datumseingaben, die dem Benutzer ohne JavaScript eine Datumsauswahl erlauben - zu schön, um wahr zu sein. Allerdings ist es das auch!

Transkript

In HTML5 gibt es noch weitere Felder für Zahlen, Datumsangaben und Zeitangaben, die ich Ihnen jetzt kurz vorstellen möchte. Dazu wechsle ich rüber in den Editor. Sie sehen hier ein ganz einfaches Formular, wo man die Anzahl der zu bestellenden Blumensträuße eingeben kann: for="anzahl", id="anzahl", "name="anzahl", type="number". Also eine Eingabe sollte eine Zahl sein, was bei Anzahl Blumensträuße Sinn ergibt. Ansonsten nichts drin in dem Formular, von der Gestaltung her unauffällig. Ich gehe mal rüber in einen modernen Firefox, lade sicherheitshalber nochmal neu hier, und Sie sehen, Anzahl Blumensträuße, das sieht aus wie ein ganz normales Textfeld. Es ist ein ganz normales Textfeld, weil ein moderner Firefox dieses Eingabefeld nicht kennt. Ein moderner Chrome hingegen sieht das etwas anders. Sie sehen bei Anzahl der Sträuße, da sind so kleine Pfeile. Mit denen kann man jetzt 1, 2, 3 Sträuße bestellen. Man kann allerdings auch sagen, ich habe zu viel Blumen, und wir gehen mal ein paar Schritte zurück. Da hat der Cursor eben ein bisschen verrückt gespielt. Sie sehen, ich kann hier sogar Minus-Eingaben machen. Dem kann man natürlich entgegenwirken, denn "number" kennt Angaben wie "min" - mindestens einen soll man bestellen - und ich sage mal, mehr als 3 ist nicht glaubwürdig. Wenn, dann soll man eben anrufen. Gespeichert ist. Im Firefox ändert sich, wie erwartet, überhaupt nichts, da er das Feld nicht kennt. Ich kann nach wie vor -3 bestellen, oder auch irgendwas anderes - da ändert sich gar nichts. Im Chrome hingegen, wenn ich das neu lade, kann ich jetzt keine Minus-Eingaben mehr machen, weniger als 1 wird es nicht, und mehr als 3 wird es auch nicht. Der reagiert also darauf. Der Nutzwert ist im Moment noch etwas eingeschränkt von diesem Feld, weil, wie gesagt, selbst moderne Browser wie Firefox das nicht kennen. Es funktioniert, man kann eine Anzahl eingeben, und wenn das ausreicht, kann man das schon benutzen. Wenn die Anzahl eingegeben werden kann, dann wäre es ja nicht verkehrt, ein Lieferdatum eingeben zu können. Hier ist ein Datum, was man eingeben kann: date - , , , . Die sind eigentlich selbsterklärend, was sie machen. "" gibt eine Zeitangabe und "datetimelocal" ist eine Zeitangabe, die sich auf die Lokalzeit bezieht, also nicht auf irgendeine Zeitzone. Bei Bedarf gibt es in den einschlägigen Nachschlagewerken Details hierzu. Der eine Zusatz ist noch ein bisschen gebunden, wenn selbst Firefox das nicht kennt, dann ist das noch nicht so ganz weit damit.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!