Date Time Number Color
softetechnologies
07-05-2017    1242 times
HTML 5 Forms : Date, Time, Number, Color

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
softetechnologies
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.
    Related Post
  Query About the post