Setting form autofocus
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.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Setting form autofocus
So, we are good there, but one of the things I'd like to do is go ahead and set the autofocus for the form, so that the user doesn't have to click into the form in order to use it. This probably isn't the best form to show that behavior, because this form is towards the bottom of the page, but at least this illustrates how easy it is to do that. So, we want our first form element to have the initial focus of the user, so that they could just begin typing, and that would be trail name. So, I'm going to find that input. It's on right here on line 84. What I'm going to do is I'm just going to place my cursor right here at the very last property, tabindex=10, hitting my Spacebar, and one of the things I see right off the bat is autocomplete and autofocus.
So, those are two attributes that are going to allow us to extend the functionality of certain form elements, by either enabling autocomplete if the device supports that, or in this case autofocus. So, I'm just going to say autofocus. Now, you'll notice that that has an option of having the Boolean value of true or false, but you really don't need to do that. You can turn autofocus off that way certainly, but I'm going to go ahead and just leave it as saying autofocus. We don't have to go in and explicitly say true value. If the autofocus property is found, it's just assumed to be true.
So, I'm going to go ahead and save this. I want to test this in a few browsers, so you can see who supports this functionality and who doesn't. So, the first thing I'm going to do is go ahead and test this in Opera. As soon as I test it in Opera, notice that it jumps right to that form element, the field is focused, and it's ready for input. Again, not the best solution because this particular form is so far down the page, but it shows you how easy it is to do that. I'm going to test it in Chrome now, and in Chrome notice we get a similar behavior and down at the bottom of the page, the form element is already entered into and ready to be filled out.
So Chrome supports this as well. Testing in Safari gives us a similar result. In Safari, we're already down the page, and the form is ready to be filled out. So, autofocus is supported in Safari. Finally, when I test this in Firefox, you'll notice that Firefox does not support autofocus. So, Firefox users would need to manually click into the form. So, not all forms need autofocus. This one probably doesn't. You should be aware that some browsers will scroll down through the page and show these autofocused elements if they're towards the bottom of the page, just like the behavior that we saw here.
But for times when it's appropriate, being able to set autofocus through a single attribute is a welcome change from what we've had to do in the past.
There are currently no FAQs about HTML5 First Look.