HTML 5 Controls

Control Samples

Slider - Range Control

<label for="priority">Priority</label> 
<input type= "range" min= "0" max= "10" name= "priority" value= "0" id= "priority" >

Numberbox Control

<label for="estimated_hours">Estimated Hours</label> +
<input type= "number" name= "estimated_hours" min= "0" max= "1000" id= "estimated_hours" >

Date - Calendar Control

<label for="start_date">Start date</label> 
<input type= "date" name= "start_date" id= "start_date" value= "2010-12-01" >

E-mail Control

<label for="email">Email contact</label> 
<input type="email" name="email" id="email">

URL Control

<label for="url">Staging URL</label> 
<input type="url" name="url" id="url">

Color Selection Control

<label for="project_color">Project color</label> 
<input type="color" name="project_color" id="project_color">

Content Editable Control

Name 
<span id="name" contenteditable="true" >Hugh Mann</span> 

Search Control

<input type="search">

Properties

Autofocus

<label for="name">Name</label> 
<input type="text" name="name" autofocus id="name" >

Placeholder

<input id= "email" type= "email" name= "email" placeholder= "user@example.com" >

autocomplete = off

<label for="password">Password</label> 
<input id= "password" type= "password" name= "password" value= ""  autocomplete= "off" />