Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 Grundkurs

Datumsfelder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Eingabe von Datumswerten ist im Web seit jeher schwierig und wird meist durch JavaScript-Bibliotheken unterstützt. Mit HTML5 halten neue Formularfeldtypen für Datums- und Zeitwerte Einzug, inklusive Feldern für die Auswahl eines Monats oder einer Kalenderwoche.
10:54

Transkript

Würde man zehn Webentwickler befragen, welches Formular fällt in dem HTML4.4, dann würden, na ja, zwischen fünf und neun wurden antworten, ich hätte gerne einen Datepicker, also ein Feld, um Datumswerte einzugeben. Datumswerte sind ehe relativ undankbar, es gibt verschiedene Datumsformate, je nach Land, je nach Region. Die Eingabe ist teilweise mühsam, manchmal geht es mit der Tastatur schneller, auf einem mobilen Endgerät ist es mit der Tastatur nicht ganz so schön, den Wochentag hätte man ja auch ganz geil im Kopf, ein Kalender wäre hier nett. In der Regel behilft man sich hier mit entsprechenden JavaScript- Oberflächenbibliotheken, beispielsweise jQuery UI, aber in HTML wird eventuell hier etwas nachgereicht, ich sage bewusst eventuell, das werden wir im Folgendem sehen. Das standard HTML-Element für ein Eingabefeld ist input, und zur Unterscheidung, um was für eine Art von Eingabefeld es sich handelt, treffen wir mit dem type Attribut, hier finden wir in der Intellisense Vorgabe einige alte Bekannte, button checkbox beispielsweise, aber auch neuere, zum Beispiel date. Melden wir also mal date aus, ich vergebe auch einen Namen, und gleich noch ein Umbruch hinten dran, und gebe dazu an, um was für ein Feld es sich handelt, denn wir haben noch ein paar andere gesehen, also datetime zum Beispiel, und außerdem, noch datetime-local , verwandt, und hat einen kleinen, aber entscheidenden Unterschied, je nachher bemerken werden. Und wenn wir etwas weiter runtergehen, in der Telesens Liste finden wir noch einige weitere Typattribute, die auch etwas mit Datumswert zu tun haben, zum Beispiel können wir ein Monat auswählen, input type=month, und dazu noch alternativ eine Woche, input type=week, so, kurz schließen, ist gut, und außerdem hätten wir noch die Zeit, input type= und jetzt sehen wir es hier unten, können wir einmal durchscrollen, haben wir noch time. Für Sie ja gibt es keine eigene Auswahl, aber es ist vielleicht nicht so schlimm. Ich kürze die Fehler noch ab, und dann platzen Sie vermutlich bereits vor Spannung, wie das denn im Browser aussieht. Und fangen wir mal an mit dem Internet Explorer, und rufen formular.html auf, die Datei, die wir gerade angelegt haben, ja, sechs einzahlige Textfelder, ist jetzt nicht so spannend. Geben wir vielleicht den Google Chrome mal eine Chance. Das ist schon bisschen interessanter, von diesen sechs Feldern haben jetzt fünf eine andere Funktionsweise, und eins datetime bleibt wie es ist. Und vielleicht abschließend noch ein Test, im Firefox, und der Firefox bekommt dieses URL dazwischen Ablage, Firefox auch normale Textfelder. Das heißt, momentan sieht es eigentlich im Googel Chrome mit am besten aus. Und in der Tat, wir haben ja ein Datepicker, in dem können wir entsprechend regieren, zum aktuellen Datum springen, können wir auch hoch und runter zählen, also relativ gut zu bedienen, auch schnell Auswahl, auch wenn es nicht direkt hier auf das Jan, muss man zuerst scrollen, aber was sich also relativ schnell Werte auswählen, ist aber entsprechend lokalisiert, Montag erster Tag der Woche in USA ist, Sonntag der erste Tag der Woche. Wenn ich ein Datum auswähle, dann steht es entsprechend hier drin. datetime, wie gesagt, in dieser Version nicht unterstützt, datetime-local umso mehr, also Datum plus Uhrzeit , könnte auch hier was auswählen und hochzählen, oder auch eingeben, mit der Tastatur, Monat, wählen wir einfach irgendein Monat aus, und, der steht dann hier drin. Wie das dann weiter übergeben wird, anderes Thema, sehen wir aber sofort, auch eine Kalenderwoche könnten wir auswählen, nehmen wir beispielsweise mal die Weihnachtswoche 2014, Woche 52, ja, dann time irgendwo Zeit eingeben, beliebig. So, das ist jetzt also entsprechend das Formular, das sind die Formularfelder, in dieser Unterstützung, date für Datum, datetime-local für Datum und Uhrzeit, dem local Bestandteil kommen wir gleich, month für den Monat, week für die Woche, und time für die Uhrzeit. Noch nicht so toll, denn, die Frage ist, wie diese Daten verarbeitet werden, gerade das Datumsformat ist immer ein Ärgernis. Es gibt ja teilweise Monat.Tag.Jahr, wird es merkwürdig, oder Jahr.Monat.Tag, wenigstens gut zu sortieren, oder das in unseren Gefühlen gebräuchliche Tag.Monat.Jahr, statt den Punkt nimmt man manchmal ein Bindestrich etc., etc. Wie haben Sie jetzt hier die Spezifiziere entschieden, nun, um das zu erprüfen, versenden wir doch mal das Formular, machen hier also eine submit Schaltfläche, wir geben dem Formular nichts an, vor allem keine Versendemethode, das heißt, es wird standardmäßig auf GET gesetzt, also, laden wir mal neu, geben wieder ein paar Daten ein, also wieder irgendein Datum und irgendeine Uhrzeit, irgendein Monat, irgendeine Woche, und noch mal irgendeine Uhrzeit. Wir senden das Ganze, und dann werden diese Daten entsprechend an die URL hinten angehängt, wir haben ja das name Attribut gesetzt, und jetzt sehen wir das Format, das Datumsformat wird übergeben mit Jahr-Monat-Tag, die Uhrzeit wird übergeben mit Jahr-Monat-Tag, dann ein T und dann die Uhrzeit, und Monat wird übergeben mit entsprechend Jahr- und dann die Nummer des Monats, also 2 für den Februar zum Beispiel. Sehr sehr interessant ist unter anderem die Art des Datums natürlich, also sortierbares Format, wie es auch von zahlrechten Daten weiter verwendet wird, ist also ganz praktisch und vor allem es ist klar, welche Position hier welche Rolle hat. Das heißt erst Jahr, dann Monat, dann Tag. Bei Monat und Tag lässt sich aber bei manchen Daten relativ gut verwechseln, so auch hier 2014-02-12. Bei der Uhrzeit ist es so, dass dieses local hier bedeutet, es wird die lokale Uhrzeit verwendet, oder das local in datetime, was es in früheren Browserversionen mal gab, da wird zusätzlich noch die Zeitzone des Nutzers verwendet. Die Zeitzone wird also mitgeschickt, in der Regel aufsetzt zu UTC. Ist manchmal vielleicht praktisch, aber in der Regel ist man tatsächlich in einer lokalen Zeit interessiert oder bekommt aus dem Kontext die Zeitzone, insofern wird datetime aktuell nicht nur unterstützt, dafür aber, datetime-local. Bleibt eigentlich nur noch eine kleine Frage. Warum sieht das jetzt im Chrome so aus und in den anderen Browsern tut sich quasi nichts, nun, dafür mag es mehrere Gründe geben, einiges ist es natürlich historisch, in Entwicklung gewesen, einiges davon vielleicht doch ein bisschen Politik, aber die Sache ist, nach meiner Interpretation, ist ja einer der Hauptgründe, der das, so was wie ein Datumsfeld, diese semantische Information, ansieht gar nicht so interessant ist, interessant ist aber die Art und Weise der Eingabe der Oberfläche, und das insbesondere auf mobilen Endgeräten. Auf einem mobilen Endgerät habe ich keine Tastatur, lassen manche Sachen relativ schwierig auszuwählen. Was die Spezifikation sagt, in Bezug auf, wie zum Beispiel der Datepicker auszusehen hat ist, gar nichts, sondern es soll einfach die Benutzer die Mobilkeit geboten werden, ein Datum auszuwählen. Wenn Sie jetzt genau diese HTML-Seite auf einem mobilen Endgerät aufrufen würden, beispielsweise auf einem iOS System, also iPhone, iPad, Ipod Touch, dann würden Sie dort, wenn Sie hier in dieses Datum rein tippen, den Datepicker-System erhalten, als das Betriebssystem. Und so funktioniert es bei anderen Browsern, auf den BNN-Geräten. Das heißt, also die Benutzer finden sich sofort zurecht in der Eingabe, denn es ist der Datepicker, den sie vom Betriebssystem schon kennen. Also auf WLAN-Geräten ist es absolut sinvoll, das so zu tun, auf Desktop-Browsern vielleicht nicht ganz so sehr, da will man teilweise noch mit der Tastatur etwas eingeben, jetzt sieht man hier, der Chrome erlaubt das, und gibt auch Implementierungen, die das nicht erlauben, und häufig hat man ja desktopseitig vielleicht Ischow mit jQuery UI oder einem anderen Frameworx, den Datepicker gebastelt. Nach dem aktuellen Stand der Spezifikation sieht es nicht unbedingt hundert Prozent positiv aus, für das Ansehen, dass man entsprechend all diese Datumsfelder verwenden kann. Werfen wir doch ein mal einen Blick in die Spezifikation, w3.org/TR/html5, bekommen hier entsprechend den Stand, und, was hier erwähnt ist, ist das, es einige Features gibt, die eben Stand, diese Version hier, unter dem Risiko stehen, dass eventuell entfernt werden und zwar, weil die Browser sie nicht umsetzen. Dazu gehört unter anderem datetime, den wie haben wir gesehen, Google hält sich gar nicht mehr dran, aber auch die Monats- und Wochenauswahl, sogar die Uhrzeit, ja sogar datetime-local, das heißt, was verbleibt, ist inputtype=date. Davon ist also auf jeden Fall auszugehen, weil Datepicker einfach das ist, was man am häufigsten braucht. Die anderen Auswahlmöglichkeiten, die stehen zu Disposition, ich würde tippen, dass die vielleicht auch einer zukünftigen Version aus dem Chrome entfernt werden und auch aus anderen mobilen Browsern. Eine Sache ist aber ganz schön. Wir haben ja gesehen, wie diese Seite beispielsweise in Internet Explorer aussieht und dem Firefox, in der Desktop Variante. Ganz normale Textfelder. Der Browser hat nämlich ein Vollbagmechanismus. Dieser Vollbagmechanismus sagt, wenn ein inputtiype unbekannt ist, dann wird einfach standardmäßig ein einzeiliges Textfeld angezeigt, Das heißt, wir haben ein super Vollbagmechanismus, sogar für ältere Browser, in dem Fall jetzt, ein Internet Explorer6, der kennt natürlich inputtype=date nicht, zeigt also ein normales Textfeld an. Wunderbar, das heißt, ältere Browser bekommen eben ein Textfeld, und dann müssen die Benutzer die Daten von Hand eingeben, und der moderne Browser bekommt vielleicht zusätzlich die extra Oberfläche zur Eingabe der Daten, in dem Fall eben das Datumsfeld. Und das ist, denke ich, von der Anstoß und von der Verwendung her, sehr sehr praktisch, und auch bei weiteren Formularfeldtypen gilt dasselbe. Vollbag ist immer in nicht unterstützenen Browsern ein einzeiliges Textfeld, und das passt ja irgendwie immer. Soweit also zu den Datumsfeldern, die es neu in HTML5 gibt, und, zum Teil, zumindest auch noch zukünftig geben wird.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!