An input type is introduced in HTML5 called number. Visually, it looks like a spinner which have a up and down arrow at the right side of the textbox. It is used to increase or decrease the number value of the textbox.
Google Chrome and Opera are support this feature. The following attributes configure the Number control.
Example
<!DOCTYPE html>
<html>
<head>
<title>Number Demo</title>
</head>
<body>
<form name="f1">
Enter Your Age: <input type="number" min="10" max="50" step="2" value="10">
</form>
</body>
</html>
To insert a date in web page, we can use a date control. When we click on the drop down, then a calendar will appear on the screen. We can select the date from it. It make the developers more relax because now we do the same without Java script.
<!DOCTYPE html>
<html>
<head>
<title>Date Demo</title>
</head>
<body>
<form name="f1">
Input Type : DATE<br>
Enter Your Date of Birth: <input type="date" name="d_o_b">
</form>
</body>
</html>
Time control is also newly introduce in HTML5. A drop down time picker will come on browser. But every browser is not support this property.
<!DOCTYPE html>
<html>
<body>
<form>
Insert Your Class Time:<input type="time" name="usr_time">
</form>
</body>
</html>
Note: type="time" is not supported in Firefox/ IE
Week control is also newly introduce in HTML5. A drop down will come on browser to take. But every browser is not support this property.
<!DOCTYPE html>
<html>
<body>
<form>
Enter The Week Of The Year:
<input type="week" name="year_week">
</form>
</body>
</html>
Note: type="week" is not supported in Firefox/ IE
color control is also newly introduce in HTML5. we can use this property to create a form as user choose the color.
<!DOCTYPE html>
<html>
<body>
<form>
Select color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
</body>
</html>