{"id":501,"date":"2019-04-10T20:11:43","date_gmt":"2019-04-10T20:11:43","guid":{"rendered":"https:\/\/s-oneill.com\/sov02\/?p=501"},"modified":"2019-04-10T22:17:55","modified_gmt":"2019-04-10T22:17:55","slug":"responsive-web-forms","status":"publish","type":"post","link":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/","title":{"rendered":"Responsive Web Forms"},"content":{"rendered":"\n<p>I recently took a course on building responsive web forms that had some great take-away items and wanted to provide a quick reference.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Every form should have a form title describing it&#8217;s purpose.<\/li><li>Avoid using &#8220;Submit&#8221; for buttons that process forms, use a term more user focused like &#8220;Purchase Tickets&#8221;<\/li><li>Limit forms to the bare minimum (no unnecessary items)<\/li><li>Forms should be single column and labels should be above and to the left of fields to keep the eye pattern straight down the left column, not left right, left, right<\/li><li>When gathering information that could have varying formats, such as phone numbers around the world, make sure the input accommodates all possible options.<\/li><li>Break large forms into separate forms, example 20 input fields into 4 forms with 5 fields. Or at least break it into logical field sets.<\/li><li>Use radio buttons and check boxes for 5 or less choices, drop down select options for more than 5<\/li><li>Replacing labels (&lt; label >) with placeholder text can lead to confusion.<\/li><li>Browsers handle autocomplete differently.<\/li><li>Never use reset buttons.<\/li><li>Indicate on the page where validation errors occur (not only at top)<\/li><li>Anything on a mobile device that needs to be touched, like a submit button or an input, should be about 44 pixels tall.<\/li><li><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I recently took a course on building responsive web forms that had some great take-away items and wanted to provide a quick reference. Every form should have a form title describing it&#8217;s purpose. Avoid using &#8220;Submit&#8221; for buttons that process forms, use a term more user focused like &#8220;Purchase Tickets&#8221; Limit forms to the bare [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,50,1],"tags":[17,52,51],"class_list":["post-501","post","type-post","status-publish","format-standard","hentry","category-design","category-responsive-design","category-uncategorized","tag-design","tag-forms","tag-responsive"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive Web Forms - s-oneill.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Forms - s-oneill.com\" \/>\n<meta property=\"og:description\" content=\"I recently took a course on building responsive web forms that had some great take-away items and wanted to provide a quick reference. Every form should have a form title describing it&#8217;s purpose. Avoid using &#8220;Submit&#8221; for buttons that process forms, use a term more user focused like &#8220;Purchase Tickets&#8221; Limit forms to the bare [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"s-oneill.com\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-10T20:11:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-10T22:17:55+00:00\" \/>\n<meta name=\"author\" content=\"Me(sean)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Me(sean)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\"},\"author\":{\"name\":\"Me(sean)\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\"},\"headline\":\"Responsive Web Forms\",\"datePublished\":\"2019-04-10T20:11:43+00:00\",\"dateModified\":\"2019-04-10T22:17:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\"},\"wordCount\":208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"keywords\":[\"Design\",\"Forms\",\"Responsive\"],\"articleSection\":[\"Design\",\"Responsive Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\",\"url\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\",\"name\":\"Responsive Web Forms - s-oneill.com\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\"},\"datePublished\":\"2019-04-10T20:11:43+00:00\",\"dateModified\":\"2019-04-10T22:17:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/s-oneill.com\/sov02\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\",\"url\":\"https:\/\/s-oneill.com\/sov02\/\",\"name\":\"s-oneill.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\",\"name\":\"sean o\",\"logo\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/\"},\"description\":\"Web dev over 15 years.\",\"sameAs\":[\"http:\/\/s-oneill.com\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\",\"name\":\"Me(sean)\",\"url\":\"https:\/\/s-oneill.com\/sov02\/author\/user01\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Web Forms - s-oneill.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Web Forms - s-oneill.com","og_description":"I recently took a course on building responsive web forms that had some great take-away items and wanted to provide a quick reference. Every form should have a form title describing it&#8217;s purpose. Avoid using &#8220;Submit&#8221; for buttons that process forms, use a term more user focused like &#8220;Purchase Tickets&#8221; Limit forms to the bare [&hellip;]","og_url":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/","og_site_name":"s-oneill.com","article_published_time":"2019-04-10T20:11:43+00:00","article_modified_time":"2019-04-10T22:17:55+00:00","author":"Me(sean)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Me(sean)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#article","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/"},"author":{"name":"Me(sean)","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545"},"headline":"Responsive Web Forms","datePublished":"2019-04-10T20:11:43+00:00","dateModified":"2019-04-10T22:17:55+00:00","mainEntityOfPage":{"@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/"},"wordCount":208,"commentCount":0,"publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"keywords":["Design","Forms","Responsive"],"articleSection":["Design","Responsive Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/","url":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/","name":"Responsive Web Forms - s-oneill.com","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/#website"},"datePublished":"2019-04-10T20:11:43+00:00","dateModified":"2019-04-10T22:17:55+00:00","breadcrumb":{"@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/s-oneill.com\/sov02\/responsive-web-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/s-oneill.com\/sov02\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Forms"}]},{"@type":"WebSite","@id":"https:\/\/s-oneill.com\/sov02\/#website","url":"https:\/\/s-oneill.com\/sov02\/","name":"s-oneill.com","description":"","publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a","name":"sean o","logo":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/"},"description":"Web dev over 15 years.","sameAs":["http:\/\/s-oneill.com"]},{"@type":"Person","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545","name":"Me(sean)","url":"https:\/\/s-oneill.com\/sov02\/author\/user01\/"}]}},"_links":{"self":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":2,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":503,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/501\/revisions\/503"}],"wp:attachment":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}