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

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;


    Search: <input id="Search1" type="search" results="10" placeholder="Search here" required
    <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 id="Form1">
    Your Name: <input class="val" required>
    Your E-mail: <input class="val" type="email" placeholder="e.g." required>
    Your URL: <input class="addr" type="url">
    <input type="submit" value="Submit">.

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

window.onload = function () {
    if (!("autofocus" in document.createElement("input"))) {