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.
In addition to this there are also some additional attributes that have been added both to the new types and the existing ones that will also be useful such as the list attribute that allows a <datalist> to be attached to the field converting it into a combobox. Many of the input types allow a pattern attribute to be specified supplying a regular expression that can be used to validate the input and a required attribute to specify which fields are required to have values entered. The autofocus attribute indicates which form field should be given the focus when the page first loads. All of these attributes reduce the form's dependence on JavaScript for the client side validation and hence will make it easier to create forms that can provide decent feedback to the person filling them out without needing to have JavaScript enabled.
