[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"ap1FUejVe78xKm8wzP_R9hI30lwnSm9azZSGrsOxckw":75,"zLtM4Iq1-PuW1EyqR0y86N49mzTkNQ6SL1_SxBolHGs":168,"_apollo:default":213},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":158,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":161,"author":162},"NodeWpPost","982","Moderne Formularelemente",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1410240136,"UTC","+00:00","2014-09-09T05:22:16+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/moderne-formularelemente",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Moderne Formularelemente | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/moderne-formularelemente","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","492","Formular","/tag/formular",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"601","HTML","/tag/html",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1385","Usability","/tag/usability",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1405","UX","/tag/ux",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"1509","webform","/tag/webform",{"__typename":159,"processed":160,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"picture\" data-entity-type=\"media\" data-entity-uuid=\"7706507e-4f7b-43db-9abd-8039582e1326\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=xTo5rIYn 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=iJFRBmKH 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=3qXLJEsP 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=S3hT-1CA 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=QzQlS1fH 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=3v2opWYL 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=Bvkf_Dhx 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=x3byfE1a 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=q2-GHQYf 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.webp?itok=ttp0B7R1 2x\" type=\"image/webp\" width=\"1000\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/picture1-1.gif.jpg?itok=ttp0B7R1\" alt=\"picture\" title=\"Moderne Formulare\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>\u003Cbr>\nMein erster Blogbeitrag bei Liechtenecker beschäftigte sich vor mittlerweile mehr als 2 1/2 Jahren mit dem \u003Ca href=\"https://liechtenecker.at/formulardesign/\" target=\"_blank\" rel=\"noopener noreferrer\">grundlegenden Design von Formularen\u003C/a>. Während sich bei den damals besprochenen Grundlagen mit der Zeit wenig verändert hat, wird vor allem in letzter Zeit immer mehr versucht, das verstaubte Image von Formularen mit modernen Elementen aufzupeppen. In meinem heutigen Blogbeitrag möchte ich zwei dieser Konzepte, \u003Cstrong>adaptive Placeholder \u003C/strong>und \u003Cstrong>Natural Language Forms\u003C/strong>, vorstellen und die Vor- und Nachteile aufzeigen.\u003C/p>\n\u003Ch2>Adaptive Placeholder\u003C/h2>\n\u003Cdiv alt=\"blogbeitrag 1\" data-entity-type=\"media\" data-entity-uuid=\"b3b12108-bbb1-4503-bb4c-c3bcc00be8b5\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=bGSVUx0y 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=HMTp5vyZ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"250\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=WYsNcxed 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=23HIFZ9V 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"250\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=TT_XOlsE 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=kGF0Eeja 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"186\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=YoRikt6U 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=Hr7SrEPA 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"120\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=ruRC_64B 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.webp?itok=uK-duz44 2x\" type=\"image/webp\" width=\"1000\" height=\"250\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"250\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-11-1.jpg.jpg?itok=uK-duz44\" alt=\"blogbeitrag 1\" title=\"Moderne Formulare\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv alt=\"blogbeitrag 2\" data-entity-type=\"media\" data-entity-uuid=\"67c3165d-ae90-4b9d-8328-f17c59821512\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=ugnAOp1G 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=EUFy__MC 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"250\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=UfoEyVJ8 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=_vfHyUlm 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"250\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=_CMe3ua6 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=9tBlofix 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"186\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=_rMVWtNd 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=EHEtwWKV 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"120\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=XD5Pv_BM 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.webp?itok=4j3YGEGe 2x\" type=\"image/webp\" width=\"1000\" height=\"250\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"250\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-21-1.jpg.jpg?itok=4j3YGEGe\" alt=\"blogbeitrag 2\" title=\"Moderne Formulare\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Jeder der schon einmal ein Formular designed oder gelayouted hat, kennt das leidige Problem: Wie sollen die Formularlabels ausgerichtet sein? Vertikal, Links ausgerichtet oder Rechts? Das Placeholder-Attribut, also die Möglichkeit die Beschreibung des Labels direkt in das Input-Feld zu stecken schien das Label-Problem zu lösen.\u003Cbr>\n\u003Cbr>\nAllerdings eröffnet dieser Attribut eine ganze Reihe an weiteren Problemen: Der Browsersupport ist noch nicht vollständig gewährleistet (Internet Explorer 8 und 9 verstehen das Attribut nicht) und aus Usability-Sicht ist es gerade bei komplexen Formularen fragwürdig, ob es wirklich klug ist, dass die Beschreibung eines Input-Feldes nur sichtbar ist, wenn noch keine Daten vom User eingetragen wurden. Auch aus Accessibilitysicht ist der Einsatz von Placeholder-Attributen \u003Ca href=\"http://www.webaxe.org/placeholder-attribute-is-not-a-label/\" target=\"_blank\" rel=\"noopener noreferrer\">höchst fraglich\u003C/a>.\u003Cbr>\nEine Alternative zum klassischen Placeholder sind sogenannte \u003Cstrong>\u003Ca href=\"http://blog.circleci.com/adaptive-placeholders/\" target=\"_blank\" rel=\"noopener noreferrer\">adaptive Placeholder\u003C/a>. \u003C/strong>Sie sollen das Problem eliminieren, dass der Beschreibungstext nur vor der Nutzereingabe sichtbar ist, indem dieser bei der Eingabe ins Input-Feld nach oben rutscht und die Aufgabe eines <label> übernimmt.\u003Cbr>\nAnders als der Effekt vermuten lässt sind \u003Cstrong>adaptive Placeholder\u003C/strong> ohne den Einsatz von JavaScript rein durch CSS machbar. Der Vorteil dieser Methode liegt natürlich vor allem im schlankeren Design von Formularen und der gesteigerten User-Experience.\u003Cbr>\nDer gravierndste Nachteil mit Sicherheit die Accessibility ist. Während der Placeholder-Attribut ein W3C Standard ist, ist die Lösung die \u003Cstrong>adaptive Placeholder\u003C/strong> einschlägt natürlich meilenweit davon entfernt. Es bleibt abzuwarten ob sich diese Methode auf lange Sicht durchsetzen kann oder ob sie weiterhin ein Nischendasein bei Design- und Frontendenthusiasten fristen wird.\u003C/p>\n\u003Ch2>Natural Language Forms\u003C/h2>\n\u003Cdiv alt=\"blogbeitrag 3\" data-entity-type=\"media\" data-entity-uuid=\"656395d2-d31f-45e6-b3e7-8bc7f8e7866b\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=ld6dGmoV 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=MGgwMym2 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=qAqhxvtq 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=YGvxE43y 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=xUXkwqr8 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=HtBjPOx6 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"373\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=9-ZdSkFn 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=NzHmJPyQ 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"240\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=JFrS6ada 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.webp?itok=w3-fFnb8 2x\" type=\"image/webp\" width=\"1000\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/blogbeitrag-31-1.jpg.jpg?itok=w3-fFnb8\" alt=\"blogbeitrag 3\" title=\"Moderne Formulare\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv alt=\"suche\" data-entity-type=\"media\" data-entity-uuid=\"d9709f57-8bdf-4b3d-a618-2aa528ceacd0\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=mm6-JZq3 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=ZYdWP92p 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1287\" height=\"515\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=sWVtfQ8X 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=XEG_4vKd 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"410\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=dA2Yytw- 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=TFsaRLH_ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=GI7PyBk3 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=-vwgeRMd 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=zIYZW9zx 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.webp?itok=ZL6W88yW 2x\" type=\"image/webp\" width=\"1287\" height=\"515\">\n                  \u003Cimg loading=\"lazy\" width=\"1287\" height=\"515\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/09/suche1-1.jpg.jpg?itok=ZL6W88yW\" alt=\"suche\" title=\"Moderne Formulare\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Ein weiterer Trend der letzen Monate sind die \u003Cstrong>\u003Ca href=\"http://tympanus.net/codrops/2013/05/21/natural-language-form-with-custom-input-elements/\">Natural Language Forms\u003C/a>. \u003C/strong>Anders als bei klassischen Formularen werden hier Daten in der Form von grammatikalisch richtigen Sätzen vom User abgefragt. Das soll einerseits das strikte Layout herkömmlicher Formulare „sprengen“ als auch Spaß machen und den User damit dazu verleiten, das Formular auszufüllen.\u003Cbr>\n\u003Cbr>\n\u003Cstrong>Natural Language Forms\u003C/strong> bieten sich natürlich vor allem bei kürzeren, wenig komplexen Formularen, also zum Beispiel bei Gewinnspielen, an.\u003Cbr>\n\u003Ca href=\"http://www.goodui.org/GoodUI_DataStory005_Sep2014_Sample.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Eine A/B-Studie\u003C/a> bei einem Gewinnspiel hat die Version mit \u003Cstrong>Natural Language Form\u003C/strong> um 19% mehr Einreichungen generiert als ein Standardformular. Ob dies ausschließlich auf das Formular oder auf die Nebeneffekte (Formulare werden kompakter, dadurch sind mehr relevante Inhalte im sichtbaren Bereich) zurückzuführen ist, ist natürlich fraglich.\u003Cbr>\n\u003Cstrong>Natural Language Forms \u003C/strong>wirken auch einfacher, weil viele Elemente die in einem Standardformular mehrere Input-Felder einnehmen würden, in \u003Cstrong>NL-Forms \u003C/strong>auf ein Inputfeld reduziert werden müssen: Statt dem Vor- und Nachnamen kann dabei z.B. nur der ganze Namen in einem Feld abgefragt werden. Das eröffnet natürlich vor allem Probleme, wenn die spätere Auswertung und Verarbeitung nicht vom Menschen sondern automatisch passieren soll, weil vie Newsletter ggf. Vor- von Nachname getrennt werden muss.\u003Cbr>\nDie Nachteile liegen natürlich ebenfalls auf der Hand. Was bei wenig komplexen Formularen sehr gut funktioniert wird bei komplexeren Formularen mit Passwort-, Adress- oder anderer Abfrage kompliziert oder sogar nicht mehr verständlich formulierbar. Ohne mich zu weit aus dem Fenster zu lehnen bezweifle ich also sehr stark, dass wir irgendwann unsere Steuererklärungen beim Finanzamt über \u003Cstrong>Natural Language Forms\u003C/strong> abwickeln werden.\u003Cbr>\nNatürlich ist dieser Art von Formularen nicht nur auf klassische Dateneingabe beschränkt. Vor allem Suchanfragen mit vordefinierten Parametern können über \u003Cb>Natural Language Forms \u003C/b>sehr schön abgebildet werden.\u003Cbr>\n\u003C/p>\n\u003Ch2>\u003C/h2>\n\u003Ch2>Fazit\u003C/h2>\n\u003Cp>Formulare gibt es fast schon so lange wie das Internet. Da ist es natürlich verständlich, dass viele versuchen, das etwas angestaubte Image mit neuen Ideen aufzupeppen. Beide in diesem Artikel vorgestellte Methoden sind eine nette Art, mehr User Experience in Formulare zu bringen. Beide Methoden haben aber nur sehr begrenzte Anwendungsmöglichkeiten unter realen Bedingungen und werden die bisher bekannten, teilweise ein wenig eingestaubten Formulare mit Sicherheit nicht so schnell ersetzen.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/moderne-formularelemente/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Moderne Formularelemente - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Mein erster Blogbeitrag bei Liechtenecker beschäftigte sich vor mittlerweile mehr als 2 1/2 Jahren mit dem grundlegenden Design von Formularen. Während sich bei den damals besprochenen Grundlagen mit der Zeit wenig verändert hat, wird vor allem in letzter Zeit immer mehr versucht, das verstaubte Image von Formularen mit modernen Elementen aufzupeppen. In meinem heutigen Blogbeitrag […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/moderne-formularelemente/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2014-09-09T07:22:16+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2014/09/picture1-1.gif\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/moderne-formularelemente/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2014/09/picture1-1.gif\",\"width\":1000,\"height\":400,\"caption\":\"Moderne Formulare\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/moderne-formularelemente/#webpage\",\"url\":\"https://liechtenecker.at/blog/moderne-formularelemente/\",\"name\":\"Moderne Formularelemente - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/moderne-formularelemente/#primaryimage\"},\"datePublished\":\"2014-09-09T07:22:16+00:00\",\"dateModified\":\"2014-09-09T07:22:16+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/moderne-formularelemente/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":163,"id":164,"myRole":165,"name":166,"nickname":167},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":169},[170,188,201],{"__typename":79,"id":171,"title":172,"path":173,"wpTeaserText":174,"wpPromotedTeaserImage":13,"wpHeaderImage":175},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":176,"id":177,"excludeFromScreenreader":13,"mediaImage":178,"name":186,"path":187,"status":20},"MediaImage","3364",{"__typename":179,"url":180,"width":181,"height":182,"alt":183,"title":13,"size":184,"mime":185},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":189,"title":190,"path":191,"wpTeaserText":192,"wpPromotedTeaserImage":13,"wpHeaderImage":193},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":176,"id":194,"excludeFromScreenreader":13,"mediaImage":195,"name":199,"path":200,"status":20},"3355",{"__typename":179,"url":196,"width":181,"height":182,"alt":197,"title":13,"size":198,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":202,"title":203,"path":204,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":205},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":176,"id":206,"excludeFromScreenreader":21,"mediaImage":207,"name":211,"path":212,"status":20},"3303",{"__typename":179,"url":208,"width":181,"height":182,"alt":209,"title":13,"size":210,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":214,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":215,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":219,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":222,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":225,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":228,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":231,"Menu:nuxt-main-menu":234,"ROOT_QUERY":248,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":264,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":267,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":270,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":273,"Menu:footer":276,"TermCategories:8":286,"TermTags:492":297,"TermTags:601":298,"TermTags:1385":299,"TermTags:1405":300,"TermTags:1509":301,"User:23":302,"NodeWpPost:982":303,"MediaImage:3364":330,"NodeWpPost:1619":332,"MediaImage:3355":335,"NodeWpPost:1616":337,"MediaImage:3303":340,"NodeWpPost:1606":342},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",216,"internal",20,"expanded",21,"attributes",218],{"__ref":217},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",220,"internal",20,"expanded",21,"attributes",221],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",223,"internal",20,"expanded",21,"attributes",224],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",226,"internal",20,"expanded",21,"attributes",227],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",229,"internal",20,"expanded",21,"attributes",230],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",232,"internal",20,"expanded",21,"attributes",233],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",235],[236,238,240,242,244,246],{"__ref":237},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":239},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":241},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":243},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":245},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":247},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",249,"menu({\"name\":\"NUXT_MAIN_MENU\"})",250,"menu({\"name\":\"FOOTER\"})",252,"route({\"path\":\"/blog/moderne-formularelemente\"})",254,"latestKnowhow({\"excludeId\":\"982\",\"limit\":3})",257],"Query",{"__ref":251},"Menu:nuxt-main-menu",{"__ref":253},"Menu:footer",["null","__typename",77,"entity",255],{"__ref":256},"NodeWpPost:982",[258,260,262],{"__ref":259},"NodeWpPost:1619",{"__ref":261},"NodeWpPost:1616",{"__ref":263},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",265,"internal",20,"expanded",21,"attributes",266],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",274,"internal",21,"expanded",21,"attributes",275],{"__ref":217},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",277],[278,280,282,284],{"__ref":279},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":281},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":283},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":285},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",287,"langcode",288,"changed",289,"metatag",290],["null","__typename",118,"processed",119,"format",120],{"__ref":217},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[291,293,295],["null","__typename",93,"tag",94,"attributes",292],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",294],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",296],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",163,"id",164,"myRole",165,"name",166,"nickname",167],["null","__typename",79,"id",80,"title",81,"changed",304,"created",305,"langcode",306,"path",90,"promote",21,"status",20,"sticky",21,"metatag",307,"category",314,"contentElements",13,"evergreen",13,"tags",316,"wpBody",327,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",161,"author",328],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":217},[308,310,312],["null","__typename",93,"tag",94,"attributes",309],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",311],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",313],["null","__typename",109,"property",110,"content",81],{"__ref":315},"TermCategories:8",[317,319,321,323,325],{"__ref":318},"TermTags:492",{"__ref":320},"TermTags:601",{"__ref":322},"TermTags:1385",{"__ref":324},"TermTags:1405",{"__ref":326},"TermTags:1509",["null","__typename",159,"processed",160,"format",120,"summary",13],{"__ref":329},"User:23",["null","__typename",176,"id",177,"excludeFromScreenreader",13,"mediaImage",331,"name",186,"path",187,"status",20],["null","__typename",179,"url",180,"width",181,"height",182,"alt",183,"title",13,"size",184,"mime",185],["null","__typename",79,"id",171,"title",172,"path",173,"wpTeaserText",174,"wpPromotedTeaserImage",13,"wpHeaderImage",333],{"__ref":334},"MediaImage:3364",["null","__typename",176,"id",194,"excludeFromScreenreader",13,"mediaImage",336,"name",199,"path",200,"status",20],["null","__typename",179,"url",196,"width",181,"height",182,"alt",197,"title",13,"size",198,"mime",185],["null","__typename",79,"id",189,"title",190,"path",191,"wpTeaserText",192,"wpPromotedTeaserImage",13,"wpHeaderImage",338],{"__ref":339},"MediaImage:3355",["null","__typename",176,"id",206,"excludeFromScreenreader",21,"mediaImage",341,"name",211,"path",212,"status",20],["null","__typename",179,"url",208,"width",181,"height",182,"alt",209,"title",13,"size",210,"mime",185],["null","__typename",79,"id",202,"title",203,"path",204,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",343],{"__ref":344},"MediaImage:3303"]