Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
So again I have the trails.htm file open and this one is found in 05_04 folder and I am just going to scroll down to my form again. So here we have our placeholder text in place and our form is looking pretty much the way we left it last time. So what we are going to do is we are going to take the trail name, the name of the writer, and email, and we are going to mark all of those items as required. All right, so I am going to go back to my trail name. Now you will notice autofocus is back again and that's just so that when we test itin our browser it will jump right to the form and we want to worry about scrolling down, but if you don't like it there feel free to go ahead and get rid of that.
Right, so I am going to type in a space right after autofocus and I am just going to type in required. So required is another attribute value that is a Boolean value and as we have with our other Boolean values we don't have to specifically say true or false. If we want the value to be true we can just say required. So we are going to do that for our trail name input, we are going to do it here for our name input, and we are going to do it here for our email input. So required for all of those guys. So we are going to go ahead and save that.
Now again, the only browser that's going to give us any type of feedback right now about this at all is Opera. So I am going to test this in Opera and we are going to see how some devices or browsers might respond to this. So, if I scroll down to the Submit button and I just click that, notice that Opera sort of have some default form validation already built in. It says "Hey, you have to specify a value." So okay I will just something in. You know, something nonsensical. I will submit it again and it says "No, no, no, you have to submit a value here" and finally, it says "No, no, no, you have to do it for email too". But watch this. So again if I just type in something an email and submit it again, now it's saying "Hey, that is not an illegal email address." So again it's taking advantage of the fact that that particular input field is specified as being an email input.
So even then the browser is able to say, "Well, this is a-- it is required and it's an email." So here we have some form validation built directly into the device or directly into the browser. Of course, I wouldn't expect that to replace your own form validation. You are going to want to be able to guide the user through. You are probably not going to want to rely on the device for that functionality. It's something you want to build yourself. But again the nice thing is that gives you a little bit of a fallback security for specific browsers or devices and the other thing that it does for you is by being able to mark a field as required, you have another hook that you can use when you are scripting your own form validation. So that's pretty cool.
So by being able to mark these fields as required, you are able to position your form in a way that makes it easier to write validation overall, regardless whether using client-side or server-side. Now given that we can now also be more specific about the type of form element that's required, we now have even more options to create robust and interactive form validation for our users.
There are currently no FAQs about HTML5 First Look.
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.