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
82 Video lessons · 97106 Viewers
61 Video lessons · 84412 Viewers
71 Video lessons · 68620 Viewers
56 Video lessons · 101108 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.