HTML 5 New Form Fields
HTML 5 has introduced a number of new types of input fields that can be used in your forms. There are also new tags that also relate to forms.
Here are the new types that the input field in HTML 5 supports.
- <input type="color"> creates a colour wheel control to allow a colour to be selected.
- <input type="date"> creates a date input control such as a popup calendar allowing a date to be selected.
- <input type="datetime"> combines the date and time controls into one and assumes UTC timezone.
- <input type="datetime-local"> combines the date and time controls into one and assumes local timezone.
- <input type="email"> allows the browser to provide built in validation that the value entered looks like an email address. The pattern attribute allows for some valid email addresses to be rejected.
- <input type="month"> allows a month/year to be selected.
- <input type="number"> creates a spinner tool allowing numbers to be selected using specified minimum, maximum and step sizes.
- <input type="range"> similar to number but normally producing a slider rather than a spinner. Intended to be used where the value doesn't need to be precise.
- <input type="search"> identifies this text input field as containing a search term. It serves no useful purpose as there is no distinctive difference between it and a regular text input.
- <input type="tel"> identifies this text input field as containing a telephone number. Since a telephone number can validly contain any number, letter, spaces as well as any of -()+ there is not very much to distinguish this from any other text input. Hopefullt the browsers will not be silly enough to build formatting restrictions into this so that only phone numbers from a small part of the world are accepted as valid the way some moronic web site owners do.
- <input type="time"> creates a time input control allowing a time of day to be specified.
- <input type="url"> allows the browser to provide built in validation that the value entered looks like a valid absolute URL.
- <input type="week"> allows a week/year to be selected.
Unlike many of the proposed new tags that simply duplicate what is already available, all of these (except for search and perhaps tel) provide the opportunity to add new and useful form control tools into web browsers.
This article written by Stephen Chapman, Felgall Pty Ltd.