Lets discuss what are the new input type
introduced in HTML 5 and how to use them.
color [Browser: Opera 11+, Chrome 20+ ]
It used to give an option to the user to select a colour through a color picker. It returns the value as hexadecimal.
<input id="myColor" name="myColor" type="color">
Dates and times [Browser: Opera 11+, Chrome 20+ ]
HTML 5 has
introduced 6 input types for date related functionality. Like date, datetime, datetime-local, time, week and month.
Date
<input id="myDate" name="myDate" type="date">
You can also assign date range as min and max attribute as
yyyy-mm-dd format.
<input id="myDate" name="myDate" type="date" min="2013-01-01" max="2013-12-31">
Input type datetime is only supported by Opera 9+ and datetime-local
will not work in any browser, though you can use it as an input type
in your form. So let's forget about both input type for now.
Time
<input id="myTime" name="myTime" type="time">
Number [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]
Another input type introduced in HTML 5 is number. This will
force user to enter number only. In case of Iphone the browser will
display number pad only.
<input id="myNum" name="myNum" type="number">
Attributes used in number type are
value,
min,
max and
step. Value is used to set the default value and where min and max are used to set the
Minimum and Maxim value of the input field. Step sets the increment or
decrement value of the number field.
The following example will set the default / minimum value of the
number field to 10 and maximum to 100. It will increase or
decrease by 2points each time the user change it.
<input id="myNum" name="myNum" type="number"
value="10" min="10" max="100" step="2">
Range [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]
In order to create a Slider in HTML we can use input type range.
Though this will not look fancy, you can use is as a basic slider.
You can use negative values in range.
Attributes used in
range are
value,
min,
max and
step.
<input id="myRange" name="myRange" type="range"
value="10" min="10" max="100" step="2">
Email:
Force user to enter valid email address.
<input id="myEmail" name="myEmail" type="email">
URL:
Force user to enter valid URL.
<input id="myURL" name="myURL" type="url">
Tel:
Force user to enter valid phone number.
<input id="myPhone" name="myPhone" type="tel">
