{"id":2868,"date":"2013-09-06T16:39:15","date_gmt":"2013-09-06T14:39:15","guid":{"rendered":"http:\/\/blog.till.de\/?p=2868"},"modified":"2016-04-08T16:58:03","modified_gmt":"2016-04-08T14:58:03","slug":"validierung-von-formularen-mit-html5","status":"publish","type":"post","link":"https:\/\/blog.till.de\/allgemein\/validierung-von-formularen-mit-html5\/","title":{"rendered":"Validierung von Formularen mit HTML5"},"content":{"rendered":"

Mit HTML5 ist es m\u00f6glich dem Nutzer erkenntlich zu machen, welche Felder Pflichtfelder sind, bzw. ob das Feld richtig ausgef\u00fcllt wurde. Dies wird allerdings noch\u00a0 nicht von allen Browsern unterst\u00fctzt. Um sicher zu gehen, dass Sie aus dem Formular die richtigen Daten erhalten und alle Pflichtfelder gef\u00fcllt sind, sollten die Angaben weiterhin serverseitig mit beispielsweise PHP \u00fcberpr\u00fcft werden.<\/p>\n

Um ein Formularfeld mittels HTML5 als Pflichtfeld zu deklarieren muss dem Input-Tag nur ein „required<\/em>„-Attribut hinzugef\u00fcgt werden. Dies k\u00f6nnte beispielsweise so aussehen:<\/p>\n

<input type=“text“ name=“Vorname“ required=“required“ \/><\/em>
\n\"name\"<\/a>
\nUnd sobald das Feld ausgef\u00fcllt wurde:
\n
\"Name_richtig\"<\/a><\/p>\n

Die Formatierungen der Input-Felder, wie z.B. die Daumen, die in den Bildern zu sehen sind, k\u00f6nnen per CSS angepasst bzw. eingebaut werden:<\/p>\n

input:required:invalid, input:focus:invalid {
\nbackground-image: url(\/images\/invalid.png);
\nbackground-position: right top;
\nbackground-repeat: no-repeat;
\n}
\ninput:required:valid {
\nbackground-image: url(\/images\/valid.png);
\nbackground-position: right top;
\nbackground-repeat: no-repeat;
\n}<\/code><\/em><\/p>\n

Auch, wenn die Formularfelder nur mit bestimmten Inhalten gef\u00fcllt werden sollen, kann dies mit HTML5 realisiert werden. Dazu muss das\u00a0„pattern<\/em>„-Attribut in den Input-Tag eingef\u00fcgt werden:<\/p>\n

<input type=\"url\" name=\"website\" required=\"required\" pattern=\"https?:\/\/.+\" \/><\/code><\/em><\/p>\n

In diesem Beispiel wird gepr\u00fcft, ob das Feld mit „http:\/\/“ bzw. mit „https:\/\/“ beginnt.<\/p>\n

Das „pattern<\/em>„-Attribut erh\u00e4lt als Wert einen regul\u00e4ren Ausdruck. Die Eingabe des Benutzers muss, damit das Formular abgesendet werden kann, diesem Ausdruck entsprechen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mit HTML5 ist es m\u00f6glich dem Nutzer erkenntlich zu machen, welche Felder Pflichtfelder sind, bzw. ob das Feld richtig ausgef\u00fcllt wurde. Dies wird allerdings noch\u00a0 nicht von allen Browsern unterst\u00fctzt. Um sicher zu gehen, dass Sie aus dem Formular die richtigen Daten erhalten und alle Pflichtfelder gef\u00fcllt sind, sollten die Angaben weiterhin serverseitig mit beispielsweise… Weiterlesen »Validierung von Formularen mit 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,77],"tags":[311,305,312],"_links":{"self":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2868"}],"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=2868"}],"version-history":[{"count":0,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2868\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/media?parent=2868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/categories?post=2868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/tags?post=2868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}