HTML5 Form Input Types and Attributes
HTML
<link rel="stylesheet" href="http://dryan.com/css3/css/html5-reset.css">
<form action="/echo/html/" method="POST">
<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="name" placeholder="Name" autofocus />
<input type="number" name="age" min="13" max="100" placeholder="age" />
<input type="date" name="birthdate" placeholder="birthdate" />
<input type="time" name="nbztime" placeholder="nbztime" />
<input type="week" name="nbzweek" placeholder="nbzweek" value="2013-W24"/>
<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" />
<input type="search" name="nbz" list="browsers" placeholder="choose nbz" />
<input type="text" name="browser" list="rowsers" 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;
}