×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Forms : Search Box & Range Email URL Phone
Date Time Number Color - HTML 5
6325    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.
Albert Einstein
The only source of knowledge is experience.
Albert Einstein
484
55.7
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     43021
01/01/2018     36304
25/06/2018     34795
28/06/2017     34409
02/08/2017     32758
01/08/2017     27280
06/07/2017     27080
15/05/2017     26678
14/07/2017     22287
21/04/2018     20937
softetechnologies