HTML5 Form Input Types and Attributes

by shruthi

HTML

<link rel="stylesheet" href="http://dryan.com/css3/css/html5-reset.css">
<form action="/echo/html/" method="POST">
    <input type="text" name="name" placeholder="name" autofocus required  />
    <input type="password" name="password" placeholder="password" required />
    <input type="number" name="age" min="13" max="100" placeholder="age" />
    <input type="date" name="birthdate" placeholder="birthdate" />
    <input type="time" name="time" placeholder="time" />
    <input type="tel" name="phone" placeholder="phone" />
    <input type="email" name="email" placeholder="email" required />
    <input type="address" name="address" placeholder="address" />    
    
    <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;
}