{"id":247786,"date":"2016-11-12T06:37:29","date_gmt":"2016-11-12T13:37:29","guid":{"rendered":"http:\/\/css-tricks.com\/?p=247786"},"modified":"2016-11-12T06:37:29","modified_gmt":"2016-11-12T13:37:29","slug":"formlinter","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/formlinter\/","title":{"rendered":"FormLinter"},"content":{"rendered":"

I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form><\/code> HTML for best practices. Things like every input having a label, using correct input types, required fields, and more.<\/p>\n

Ben Orenstein<\/a>: <\/p>\n

Doing all these things right is worth the effort: improvements like these improve accessibility and increase conversions. However, checking this sort of thing by hand is tedious and error-prone.<\/p><\/blockquote>\n

We were testing some forms in the ol’ CSS-Tricks team chat and it was doing what it said on the box. On Geoff’s personal site, it gave his contact form a “B”<\/a> for not having matching labels for inputs and not having any fields required (seems like a fairly high grade?). The form was output from the mega-popular “Contact Form 7” for WordPress, also a bit surprising. <\/p>\n

Many of the forms we tested bombed the app though. No word on that.<\/a> Might be an HTTPS thing? <\/p>\n","protected":false},"excerpt":{"rendered":"

I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form> HTML for best practices. Things like every input having a label, using correct input types, required fields, and more. Ben Orenstein: Doing all these things right is worth the […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[466,595],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":305810,"url":"https:\/\/css-tricks.com\/accessibility-links\/","url_meta":{"origin":247786,"position":0},"title":"Accessibility Links","date":"April 2, 2020","format":false,"excerpt":"Austin Gil has kicked off the first in a five-part series about \"HTML Forms Right\" and to starts with semantics. It's talking to the \"we build our front-ends with JavaScript\" crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":190426,"url":"https:\/\/css-tricks.com\/exposing-form-fields-radio-button-css\/","url_meta":{"origin":247786,"position":1},"title":"Exposing Additional Form Fields via Checked Radio Buttons","date":"December 9, 2014","format":false,"excerpt":"There is a :checked pseudo class in CSS. I often think of it in connection with the \"checkbox hack\", in which you use it on a hidden checkbox with the ~ general sibling combinator to simulate toggling behavior without any JavaScript. It's a hack because now you have these stray\u2026","rel":"","context":"In "Intermediate"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":377565,"url":"https:\/\/css-tricks.com\/accessible-forms-with-pseudo-classes\/","url_meta":{"origin":247786,"position":2},"title":"Accessible Forms with Pseudo Classes","date":"March 22, 2024","format":false,"excerpt":"Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"Web Form Accessibility with focus-within","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/focus-within-form-accessibility.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377733,"url":"https:\/\/css-tricks.com\/demystifying-screen-readers-accessible-forms-best-practices\/","url_meta":{"origin":247786,"position":3},"title":"Demystifying Screen Readers: Accessible Forms & Best Practices","date":"April 19, 2024","format":false,"excerpt":"This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out \"Managing User Focus with :focus-visible\". In this post we are going to look at using a screen reader when navigating a form, and also some best practices. Editor's\u2026","rel":"","context":"In "Article"","img":{"alt_text":"A user using a braille machine with a computer.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/04\/braille-machine-scaled.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351454,"url":"https:\/\/css-tricks.com\/building-a-form-in-php-using-domdocument\/","url_meta":{"origin":247786,"position":4},"title":"Building a Form in PHP Using DOMDocument","date":"September 14, 2021","format":false,"excerpt":"Learn how to build an HTML form in PHP using DOMDocument \u2014 a structured and expressive way to build logical markup.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/cover@2x.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326279,"url":"https:\/\/css-tricks.com\/a-complete-state-machine-made-with-html-checkboxes-and-css\/","url_meta":{"origin":247786,"position":5},"title":"A Complete State Machine Made With HTML Checkboxes and CSS","date":"November 27, 2020","format":false,"excerpt":"State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we\u2019re going to do exactly that. I recently built a website\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/state-management.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247786"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=247786"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247786\/revisions"}],"predecessor-version":[{"id":247787,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247786\/revisions\/247787"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=247786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=247786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=247786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}