modernizr example

by vijayram_a

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="html5-reset.css">
<form action="/echo/html/" method="POST">
    <input type="text" name="name" placeholder="name" autofocus />
    <input type="number" name="age" min="13" max="100" placeholder="age" />
    <input type="date" name="birthdate" placeholder="birthdate" />
    <input type="tel" name="phone" placeholder="phone" />
    <input type="email" name="email" placeholder="email" required />
    <input type="url" name="url" placeholder="url" />
    <input type="password" name="password" placeholder="password" disabled />
    <input type="color" name="color" placeholder="favorite color" />
    <input type="range" name="range" min="13" max="100" placeholder="range" />
    <datalist id="pages">
        <option value="home">Home</option>
        <option value="logout">Logout</option>
    </datalist>
    <input type="search" name="search" placeholder="search" list="pages" />
    <datalist id="browsers">
        <option value="Google Chrome"/>
        <option value="Internet Explorer"/>
        <option value="Firefox"/>
        <option value="Opera"/>
        <option value="Safari"/>
        <option value="Others"/>
    </datalist>
    <input type="text" name="browser" list="browsers" placeholder="choose browser" />
    <button type="submit">submit</button>
</form>

CSS

form {
    margin: 1em;
}
input, button {
    border: 1px solid silver;
    background: white;
    padding: 5px;
    margin-bottom: 1em;
    display: block;
}