{"id":336,"date":"2018-02-12T07:00:00","date_gmt":"2018-02-12T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=336"},"modified":"2018-02-07T11:26:27","modified_gmt":"2018-02-07T18:26:27","slug":"specify-automatic-form-functionality","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/12\/specify-automatic-form-functionality\/","title":{"rendered":"Specify Automatic Form Functionality"},"content":{"rendered":"<p>Form fields have four attributes that give you control over their automatic behavior: <code>autocomplete<\/code>, <code>spellcheck<\/code>, <code>autocapitalize<\/code>, and <code>autocorrect<\/code>.  The first two included in the HTML spec, while the other two are non-standard but still worth implementing.<\/p>\n<h4>Autocomplete<\/h4>\n<p>The <code>autocomplete<\/code> attribute tells the browser if it should provide autocomplete functionality for a form field.  Aside from the basic choices of <code>on<\/code> and <code>off<\/code> for the value of this attribute, there are a wide variety of choices to specify what, exactly, the browser should put in a given form field.  Here are some examples:<\/p>\n<ul>\n<li><code>name<\/code><\/li>\n<li><code>username<\/code><\/li>\n<li><code>new-password<\/code><\/li>\n<li><code>current-password<\/code><\/li>\n<li><code>email<\/code><\/li>\n<li><code>address-line1<\/code><\/li>\n<li><code>postal-code<\/code><\/li>\n<\/ul>\n<p>That&#8217;s just a sample.  There are a bunch of other possible values covering things like payment details, personal information, and more.  You can find <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/form-control-infrastructure.html#autofill\">a complete list with details for each possible value, along with a handy table, in the WHATWG Standard<\/a>.<\/p>\n<p>Adding the <code>autocomplete<\/code> attribute to form fields when appropriate can make filling your form out a lot easier for everyone, especially people using mobile devices that are difficult to type on.<\/p>\n<h4>Spellcheck<\/h4>\n<p>Just what it says on the tin: the <code>spellcheck<\/code> attribute controls the automatic spell check functionality of a form field.  Possible values are <code>true<\/code>, <code>false<\/code>, and <code>default<\/code>.  This attribute comes in handy if you have a text field that&#8217;s going to accept something like a special token (like a coupon code), URL, or programming code.<\/p>\n<h4>Autocapitalize<\/h4>\n<p>As I mentioned above, the <code>autocapitalize<\/code> attribute is non-standard.  It&#8217;s only supported in Safari on iOS and Chrome.  Possible values are <code>sentences<\/code>, <code>words<\/code>, <code>characters<\/code>, and <code>none<\/code>.<\/p>\n<p>Despite being non-standard this attribute can still help a ton of people and make your form a lot easier to fill out, and including it has no negative impact.  Browsers that don&#8217;t support it will simply ignore it.<\/p>\n<h4>Autocorrect<\/h4>\n<p>The <code>autocorrect<\/code> attribute is also non-standard, and this attribute is only supported in Safari on iOS.  Possible values are <code>on<\/code> and <code>off<\/code>.<\/p>\n<p>Again, this has the potential to help people have a better experience filling out your forms, and there&#8217;s no downside to including it.<\/p>\n<hr>\n<p>These four attributes, when used wisely, can make the difference between a frustrating form experience and a pleasant one.  Implementing these usually only takes a few minutes. This is time I&#8217;m sure your visitors will consider well-spent.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Find out how to take your forms from frustrating to fabulous with four simple attributes.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-336","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":9,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/336\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/336\/revisions\/415"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}