Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most helpful HTML5 atrributes for form validation is the required attribute. On browsers that support it, it will prevent the form from being submitted unless the input is filled out. I'll be using this form from our exercise files. This is one of the forms I styled in my course on CSS styling forms. If we take a look at the code for this page, you can see a single input field. I'm going to add the required attribute to the input field and then switch over to the browser. I'll refresh the form. And if I try to submit it without filling it out, I'll get a little error message that says please fill out this field. It also won't let me submit the form.
When you use the required attribute, it's always a good idea to also use the placeholders attribute. Placeholders give users a hint as to how they're supposed to fill out our field. That way, the user will know that I don't simply want their first name. Let me refresh this page. And you can see that it appears as a grayed out item. As soon as I start typing something in here, it will disappear. It's always a good idea to give users feedback with things like required fields and placeholders, but you shouldn't rely totally on this type of validation because not all browsers support it. A good place to check is the website caniuse.com.
You can check for support for any HTML5 feature by doing a search. You can see that the required parameter only works on newer versions of IE and none of the mobile browsers. To learn more about forms, make sure you check out HTML5 Web Forms in Depth, with Joe Marini.
Get unlimited access to all courses for just $25/month.Become a member