HTML5 Input Types
There are several new input types has in HTML5 for a from. These new input type feature allow to create better input control and Validation.
Note: Below given the several new input type.
- color
- date
- datetime
- datetime-local
- email
- month
- number
- url
- week
- range
- search
- tel
- time
Note: These all input type supported by modern browser. If it does not then it behave like a regular text field.
Input Type: color
This input type contain the color. And it is used give color in input
|
Select your color: <input type="color" name="yourcolor" /><br />
|
Input Type: date
It is allow to user for select date
|
Holiday: <input type="date" name="hday" />
|
Input Type: datetime
It is allow to user for select date as well as time according to time zone
|
Holiday(date and time): <input type="datetime" name="hdaytime" />
|
input Type: datetime-local
It is allow to user to select date and time but not according to time zone
|
Holiday (date and time): <input type="datetime-local" name="hdaytime" />
|
Input Type: Email
This input type contain email address
|
Enter Email: <input type="email" name="umail" />
|
Input Type: month
This input type allow to user to select month and year.
|
Holiday(month and year): <input type="month" name="hdaymonth" />
|
Input Type: number
This input type is used to select the numeric value
|
NO of item (between 1 and 10): <input type="number" name="item" min="1" max="10" />
|
Input Type: url
The input type url is used for input fields that contain a URL.
Automatically value is validate in the url field when the form is submitted
|
ADD your Mainpage: <input type="url" name="Mainpage" />
|
Input Type: week
The input type week allow to the user to select input week and year
|
Select your desire week: <input type="week" name="year and week" />
|
Input Type: range
The range input type allow to user to insert number between a specific range. It also take restriction
|
Enter no <input type="range" name="e_no" min="1" max="10" />
|
These following attributes to specify restrictions:
- max -It allow the maximum value
- min - It allow the minimum value
- step -It is specifies the legal number increment
- value -It is specifies the default value
Input Type: search
It is used to search the field that work like a regular text
|
Search Yahoo: <input type="search" name="Yahoosearch" />
|
Input Type: tel
This field define that enter telephone number
|
Telephone No: <input type="tel" name="tel" />
|
Input Type: time
This input type allow to user to select time
|
Select your desire time: <input type="time" name="desire_time" />
|
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here