HTML5 Forms Examples including autofocus fallback.

Dedicated UI Form Controls

The "search" control below should be focused (in any browser):

Search: Range Selector: Date Selector: Date/Time Local: Number with min max and steps:

Form Fields with different Input Types including validation.

Your Name: Your E-mail: Your URL:

HTML5 Forms Code Snippet

1. Styles 

<style>
input, p {
    display: block;
    margin-bottom: 10px;
}
.val:valid {
    background: lime;
}
.val:invalid {
    background: red;
    color: white;
}
.addr:invalid {
    background: red;
    color: white;
}
input[type=submit]:default {
    padding: 3px 7px 3px 7px;
}
</style>

2. HTML 


<form>
    Search: <input id="Search1" type="search" results="10" placeholder="Search here" required
        autofocus>
    <input type="submit" value="Search">
    Range Selector: <input type='range' min='0' max='50' value='0' />
    Date Selector: <input name="birthday" type="date" />
    Date/Time Local: <input name="t" type="datetime-local" />
    Number with min max and steps: <input name="n" type="number" min="0" max="20" step="2" value="6">
</form>      

<form id="Form1">
    Your Name: <input class="val" required>
    Your E-mail: <input class="val" type="email" placeholder="e.g. alex@html5.com" required>
    Your URL: <input class="addr" type="url">
    <input type="submit" value="Submit">.
</form>

3. JavaScript (used so that autofocus is always supported) 

<script>
window.onload = function () {
    if (!("autofocus" in document.createElement("input"))) {
        document.getElementById("s").focus();
    }
}
</script>