{"id":21,"date":"2007-02-22T23:05:39","date_gmt":"2007-02-22T22:05:39","guid":{"rendered":"http:\/\/schuerig.de\/michael\/blog\/index.php\/2007\/02\/22\/form-layout\/"},"modified":"2021-11-24T09:20:09","modified_gmt":"2021-11-24T08:20:09","slug":"form-layout","status":"publish","type":"post","link":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/2007\/02\/22\/form-layout\/","title":{"rendered":"Form Layout"},"content":{"rendered":"<p>I&#8217;ve looked at quite a lot of examples of form layout over the past two years. Invariably the demonstrations looked very pretty and were pretty primitive. Usually, all the input elements are lined up in a single column; labels are either stuck on top of the inputs or prepended to them. This is all well for simple forms or a succession of forms chained together in wizard-style. It is less appealing for web-based applications targetted at proficient users who interact with them frequently.<\/p>\n<h2>Ground Rules<\/h2>\n<ul>\n<li>Tables only where they are semantically meaningful.<\/li>\n<li>As much independence as possible from specific window or font sizes.<\/li>\n<li>Efficient use of available space.<\/li>\n<li>Horizontal and vertical alignment to columns.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.schuerig.de\/michael\/webdesign\/demo\/form.html\">Here&#8217;s my entry.<\/a><\/p>\n<p>For those with impaired browsers, here&#8217;s what it looks like at various widths.<\/p>\n<p>800 pixels<br \/>\n<img decoding=\"async\" alt=\"large layout\" src=\"http:\/\/www.schuerig.de\/michael\/webdesign\/demo\/form800x600-1.png\" \/><\/p>\n<p>600 pixels<br \/>\n<img decoding=\"async\" alt=\"large layout\" src=\"http:\/\/www.schuerig.de\/michael\/webdesign\/demo\/form600.png\" \/><\/p>\n<p>400 pixels<br \/>\n<img decoding=\"async\" alt=\"large layout\" src=\"http:\/\/www.schuerig.de\/michael\/webdesign\/demo\/form400.png\" \/><\/p>\n<p>The relevant part of the <a href=\"http:\/\/www.schuerig.de\/michael\/webdesign\/demo\/stylesheets\/boilerplate.css\">boilerplate.css<\/a> stylesheet isn&#8217;t even overly long.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve looked at quite a lot of examples of form layout over the past two years. Invariably the demonstrations looked very pretty and were pretty primitive. Usually, all the input elements are lined up in a single column; labels are &hellip; <a href=\"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/2007\/02\/22\/form-layout\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/posts\/21\/revisions\/144"}],"wp:attachment":[{"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.schuerig.de\/michael\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}