you can really speed up data entry if you place the user’s cursor in the first field on the form when they load the page. Many search engines do this using JavaScript, and now HTML5 provides this capability as part of the language.
All you have to do is add the autofocus attribute to any form field, like we already did on the profile page we built in Describing Data with New Input Fields,
<label for=”name”>Name</label>
<input type=”text” name=”name” autofocus id=”name”>
You can have only one autofocus attribute on a page for it to work reliably. If you have more than one, the browser will focus the user’s cursor onto the last autofocused form field.
Falling Back
We can detect the presence of the autofocus attribute with a little bit of JavaScript and then use j Query to focus on the element when the user’s browser doesn’t have autofocus support. This is probably the easiest fallback solution you’ll come across.
function hasAutofocusO {
var element = document.createElementC ‘input’) ;
return ‘autofocus’ in element;
$(function(){
i f(!hasAutofocus()){
$( ‘input[autofocus=true] ‘) .focusO ;
}
Just include this JavaScript on your page, and you’ll have autofocus support where you need it.
Autofocus makes it a little easier for users to start working with your forms when they load, but you may want to give them a little more information about the type of information you’d like them to provide. Let’s take a look at the placeholder attribute next.