<input type=“text“ name=“Vorname“ required=“required“ \/><\/em> 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 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 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… Mehr lesen »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,"footnotes":""},"categories":[1,77],"tags":[311,305,312],"class_list":["post-2868","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-webdesign","tag-formular","tag-html5","tag-validierung"],"_links":{"self":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2868","targetHints":{"allow":["GET"]}}],"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}]}}
\n![\"name\"](\"\/wp-content\/uploads\/sites\/17\/2013\/09\/name1.png\")
<\/a>
\nUnd sobald das Feld ausgef\u00fcllt wurde:
\n![\"Name_richtig\"](\"\/wp-content\/uploads\/sites\/17\/2013\/09\/Name_richtig.png\")
<\/a><\/p>\ninput: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<input type=\"url\" name=\"website\" required=\"required\" pattern=\"https?:\/\/.+\" \/><\/code><\/em><\/p>\n