×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Forms : Search Box & Range Email URL Phone
Date Time Number Color - HTML 5
7772    Arnab De    07/05/2017

Input Type : NUMBER

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.

  • Value : The value of the value attribute is loaded when the number controls display first time.
  • Min : This attribute sets the minimum value of the control.
  • Max : This attribute sets the maximum value of the control.
  • Step : Value of the step attribute sets the increment or decrement value.

Example

<!DOCTYPE html>
<html>
<head>
<title>Number Demo</title>
</head>
<body>
<form name="f1">
Enter Your Age:&nbsp;&nbsp;<input type="number" min="10" max="50" step="2" value="10">
</form>
</body>
</html>

 

Number Demo
Number Demo

Input Type: date

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:&nbsp;&nbsp;<input type="date" name="d_o_b">
</form>
</body>
</html>
HTML 5 Date Control
Date Control

Input Type: Time

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>

HTML 5 Time Control
Time Control
Note: type="time" is not supported in Firefox/ IE

Input Type : Week

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>

HTML 5 Week Control
Week Control
Note: type="week" is not supported in Firefox/ IE

Input Type : color

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>

HTML 5 Color Control
Color Control
Forms : Search Box & Range Email URL Phone
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Nelson Mandela
Education is the most powerful weapon which you can use to change the world.
Nelson Mandela
2881
80.53
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     54055
25/06/2018     45068
01/01/2018     43639
28/06/2017     41175
02/08/2017     40182
01/08/2017     34224
06/07/2017     34026
15/05/2017     33268
11/09/2018     30255
14/07/2017     29789
softetechnologies