HTML - forms - autofocus

by scheinercc

HTML

<!doctype html>  
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic HTML5 Template</title>
    </head>
    <body>

        <form id="userDetails" action="">
            <fieldset>
                <legend>Personal Details</legend>
                <div class="form-item">
                    <label for="firstName">First name:</label>
                    <input id="firstName" type="text" autofocus>
                </div>
                <div class="form-item">
                    <label for="lastName">Last name:</label>
                    <input id="lastName" type="text">
                </div>
                <div class="form-item form-item-type-2">
                    <input id="submit" type="submit" value="Submit">
                </div>
            </fieldset>
        </form>

    </body>
</html>

CSS

html {
  font: 14px/1.4em sans-serif;
}

.form-item {
    margin-bottom: 1em;
    padding: .5em;
    background-color: #ddd;
    border-radius: 3px;
}

.form-item-type-2 {
    margin-bottom: 0;
    display: inline;
}

label {
    display: inline-block;
    width: 6em;
}

JavaScript

/* fallback script based on jQuery */
$(document).ready( function() {
    
    /* **
    * check for 'autofocus' support
    * alternative if using modernizr: 'Modernizr.input.autofocus'
    */
    if ( !( 'autofocus' in document.createElement('input') ) ) {
        
        $('[autofocus]')
            // initiate focus
            .focus();
    }
});