Each browser implements the input in different ways, though.
And, as wonderful as these new input elements are, they are not supported by all browsers yet. (I will link to the CanIUse.com page for each element below.)
1. Number
Limits input to +/- integers. Decimals not allowed. May create up/down arrows. Retruns number<input type="number" name="num1">
2. Date
Creates a date picker for input. Returns numbers separated by dashes ex. 2016-12-31<input type="date" name="date1">
3. Time
Creates time picker. Returns 24-hour and minutes separated by colon (%3A).<input type="time" name="time1">
4. DateTime-Local
Creates date and time picker. Output is numbers separated by dashes, and time separated by "T", Returns hour and minutes separated by colon (%3A).and 24-hour and minutes separated by colon (%3A).
. ex. 2016-12-31T12:56
<input type="datetime-local" name="datetime-local1">
5. Month
Creates entire month picker. Returns value as number and month ex. 2016-05.<input type="month" name="month1">
6. Week
Creates entire week picker. Returns value as numbers separated by dahse of week. Ex 1 to 2016-52.<input type="week" name="week1"><br />
7. Range
Creates a slider object that defaults to a number<input type="range" name="range1">
8. Color
Creates a pop-up color picker. Outputs Hex numbers ex. "FF9900"<input type="color" name="color1">
9. URL
Does minor check of input to make sure text is in the format that includes text on both sides of at least one dot. ex. "http://www.there".<input type="url" name="url1">
10. Email
Does minor check of input to make sure text is on both sides of "@" sign. ex. "here@there"<input type="email" name="email1">
11. Telephone
Seems to be only a text input field at this time.<input type="tel" name="tel1">
Since not every element is supported, you may need to do some checking to make sure the iniputs are supported.
A couple of techniques to do so are noted here and here.
No comments :
Post a Comment