HTML5: 11 Super Form Elements You Might Not Know About Yet

These new HTML5 elements might take some of the work out of your coding, and also provide cleaner input from users.

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