Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101617 Viewers
61 Video lessons · 88376 Viewers
71 Video lessons · 72217 Viewers
56 Video lessons · 103966 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.