{"id":2708,"date":"2013-07-16T10:33:58","date_gmt":"2013-07-16T08:33:58","guid":{"rendered":"http:\/\/blog.till.de\/?p=2708"},"modified":"2013-07-16T10:33:58","modified_gmt":"2013-07-16T08:33:58","slug":"neue-input-typen-in-html5","status":"publish","type":"post","link":"https:\/\/blog.till.de\/allgemein\/neue-input-typen-in-html5\/","title":{"rendered":"Neue Input Typen in HTML5"},"content":{"rendered":"

Mit HTML5 ist es m\u00f6glich Formulare effizienter zu gestalten, indem man den Eingabefeldern bestimmte Typen zuweist. Mit Hilfe dieser Typen kann man beispielsweise bestimmen, dass bestimmte Felder nur Zahlen enthalten d\u00fcrfen, oder ein Datum eingetragen werden soll. Neben den bisher bekannten Typen, wie „text“ oder „password“ k\u00f6nnen nun auch Typen, wie z.B. „date“ verwendet werden. Die Einbindung sieht folgenderma\u00dfen aus:<\/p>\n

<input type=“date“ name=“Geburtstag“><\/p>\n

Funktionen der Input Typen<\/strong><\/p>\n

Der date<\/em>-Typ<\/a> sorgt daf\u00fcr, dass in ein Eingabefeld ein Datum eingegeben wird. Die einzelnen Zahlen k\u00f6nnen durch einen Klick auf die kleinen Pfeile rechts im Inputfeld erh\u00f6ht, bzw. verringert werden. Wenn man auf den gro\u00dfen schwarzen Pfeil klickt, \u00f6ffnet sich ein kleiner Kalender, in dem man den gew\u00fcnschten Tag manuell ausw\u00e4hlen kann.
\nDer datetime<\/em>-Typ<\/a> verh\u00e4lt sich sehr \u00e4hnlich. Mit diesem Input Typ k\u00f6nnen Sie ebenfalls das Datum in einem Kalender ausw\u00e4hlen und zus\u00e4tzlich noch die Zeit in dem Feld daneben mittels den Pfeilen einstellen. Au\u00dferdem wird die Zeitzone mit angegeben.
\nAuch der datetime-local<\/em>-Typ<\/a> ist vergleichbar. Er unterscheidet sich zum datetime-Typ nur in dem Punkt, dass es hierbei keine Zeitzone gibt.<\/p>\n

Mit dem month<\/em>-Typ<\/a> ist es m\u00f6glich Monat und Jahr einzutragen. Mit einem Klick auf den gro\u00dfen Pfeil \u00f6ffnet sich der Dialog, in dem das Jahr und der entsprechende Monat gew\u00e4hlt werden kann.
\nEine \u00e4hnliche Funktion bietet der week<\/em>-Typ<\/a>. In dem Dialog, der sich \u00f6ffnet, wenn auf den gro\u00dfen Pfeil geklickt wird, kann man eine beliebige Kalenderwoche eines beliebigen Jahres ausw\u00e4hlen.<\/p>\n

Eine vermutlich sehr h\u00e4ufig genutzter Typ ist der email<\/em>-Typ<\/a>. Ist in dem Feld keine E-Mail-Adresse eingetragen, aber das Formular wird trotzdem abgesendet erscheint automatisch eine Meldung, dass eine E-Mail-Adresse eingegeben werden soll.<\/p>\n

Der tel<\/em>-Typ sorgt daf\u00fcr, dass auf Mobilen Ger\u00e4ten zu diesem Input Feld nur eine Zahlentastatur erscheint, um die Bedienung zu erleichtern.<\/p>\n

Der url<\/em>-Typ<\/a> Pr\u00fcft, ob die Eingabe eine eine g\u00fcltige URL ist. Die Eingabe wird nur akzeptiert, wenn eine vollst\u00e4ndige URL eingegeben wurde. Ein Beispiel hierf\u00fcr w\u00e4re http:\/\/www.till.de<\/p>\n

Der search<\/em>-Typ<\/a> generiert ein „normales“ Eingabefeld mit dem Unterschied, dass es am Ende des Feldes\u00a0einen Button gibt, der den Suchbegriff wieder entfernen kann.<\/p>\n

Der number<\/em>-Typ <\/a>sorgt daf\u00fcr, dass in das Input Feld nur Zahlen eingegeben werden k\u00f6nnen. Wenn keine Zahl eingegeben wird, wird beim Absenden des Formulars automatisch eine entsprechende Nachricht ausgegeben. Zus\u00e4tzlich kann man hierbei auch eine Mindest- und H\u00f6chstgrenze angeben. Dadurch kann man mit den Pfeilen nur Zahlen zwischen diesen beiden Werten erreichen.<\/p>\n

Beim range<\/em>-Typ<\/a> wird ein Schieberegler generiert, mit dem der Nutzer einen bestimmten Wert ausw\u00e4hlen kann.<\/p>\n

Mit color<\/em>-Typ <\/a>ist es m\u00f6glich spezifische Farben zu w\u00e4hlen. Bei einem Klick auf das Eingabefeld \u00f6ffnet sich ein kleines Fenster, in dem man die gew\u00fcnschte Farbe ausw\u00e4hlen kann.<\/p>\n

 <\/p>\n

Leider unterst\u00fctzen bislang nicht alle Versionen aller Browser diese Input Typen. Wenn diese Input Typen von Ihrem Browser nicht unterst\u00fctzt werden, werden diese als „normale“ Eingabefelder dargestellt.<\/p>\n

Folgende Tabelle zeigt, welche Typen von welchen Browsern unterst\u00fctzt werden:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Typ<\/th>\nBeschreibung<\/th>\nIE bis V. 9<\/th>\nIE 10+<\/th>\nFirefox<\/th>\nChrome<\/th>\nSafari<\/th>\nOpera<\/th>\n<\/tr>\n
date<\/td>\nEingabe des Datums<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
datetime<\/td>\nEingabe des Datums und der Zeit + Zeitzone<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
datetime-local<\/td>\nEingabe des Datums und der Zeit<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
month<\/td>\nEingabe eines Monats und Jahres<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
week<\/td>\nEingabe einer Kalenderwoche eines Jahres<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
email<\/td>\nEingabe einer E-Mail-Adresse<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
tel<\/td>\nEingabe einer Telefonnummer (Zahlen und „#“,“*“)<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/td>\n<\/tr>\n
url<\/td>\nEingabe einer vollst\u00e4ndigen URL<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
search<\/td>\nEingabe eines Textes<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\nX<\/td>\n<\/td>\n<\/tr>\n
number<\/td>\nEingabe einer Zahl<\/td>\n<\/td>\nX<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
range<\/td>\nEingabe einer Zahl, z.B. einer Bewertung in einem bestimmten Bereich<\/td>\n<\/td>\nX<\/td>\n<\/td>\nX<\/td>\nX<\/td>\nX<\/td>\n<\/tr>\n
color<\/td>\nEingabe einer Farbe<\/td>\n<\/td>\n<\/td>\n<\/td>\nX<\/td>\n<\/td>\nX<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

Mit HTML5 ist es m\u00f6glich Formulare effizienter zu gestalten, indem man den Eingabefeldern bestimmte Typen zuweist. Mit Hilfe dieser Typen kann man beispielsweise bestimmen, dass bestimmte Felder nur Zahlen enthalten d\u00fcrfen, oder ein Datum eingetragen werden soll. Neben den bisher bekannten Typen, wie „text“ oder „password“ k\u00f6nnen nun auch Typen, wie z.B. „date“ verwendet werden.… Mehr lesen »Neue Input Typen in HTML5<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"categories":[1],"tags":[305,306],"class_list":["post-2708","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-html5","tag-input"],"_links":{"self":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2708"}],"collection":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/comments?post=2708"}],"version-history":[{"count":0,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2708\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/media?parent=2708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/categories?post=2708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/tags?post=2708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}