Latest Trends
HTML forms are an important part of the web, as a way for the end user to send information back to the server. For the developers, in order to make sense of the data, it is important that the user enters the right data at the right place. Hence, form validation becomes very important. For example if a form asks for a birth date, it is important that a text field be validated to contain a date in a specified format and not just another string.
Traditionally all this is achieved through Javascript validations on client side or complete validations on client side. HTML5 tries to solve the basic validation need, relieving the coder, by providing different types of Input elements that could be used in the forms.
Below is the list of available HTML5 Input elements:
This is not a new element. Always available for any kind of string input. No validation in built. The syntax is pretty straightforward.
<input type="text">
However, there have been new attributes added that aid in form validation. The attributes are mentioned below:
form: The id of the form with which to associate this input
autocomplete: “on” or “off” – whether you want the browser to autofill the value in this field
autofocus: “autofocus” or “” – whether the browser should focus on this field after loading the document
list: The id of the datalist with which to associate this data
pattern: A regular expression to use to validate the input
required: “required” or “” – whether this input is required to be filled or optional
placeholder: A description text/hint for the field
Just from the list above you could see how a lot of Javascript can be eliminated just by providing these additional attributes to the input text.
Again, not a new HTML5 input tag. A text input that does not show the contents but hides the characters beneath a symbol like *.
<input type="password">
Attributes same as that for “text” input type.
A new HTML5 input type, specifying a one-line plain-text edit control for entering one or more search terms.
<input type="search">
Attributes same as that for “text” input type.
Old input elements. Generally used for Yes/No and choice type of input.
<input type="checkbox">
<input type="radio">
Additional attributes available are form, autofocus and required.
Again not new elements. Input element which shows a push button, which may cause some script to run upon click. Reset will clear all the input values in the form. Submit will submit the form data. Image allows selecting co-ordinated and submitting form data.
<input type="button">
<input type="reset">
<input type="submit">
<input type="image">
New attributes added are form and autofocus.
The submit and image input types have some additional attributes available as below:
formaction: A url to which to submit the form
formenctype: ”application/x-www-form-urlencoded” or ”multipart/form-data” or ”text/plain” – how to encode the form before submit
formmethod: “get” or “post” – the HTTP method of form submission
formtarget: “_blank”, “_self”, “_parent”, “_top” or any browsing context keyword
formnovalidate: “formnovalidate” or “” – whether to validate upon form submission
Again an existing element. Used to upload files during form submission.
<input type="file">
New attributes available are form, autofocus and required as explained above for “text”. In addition, the following attribute is added:
mutiple: “multiple” or “” – whether this field allows mulitple values (allowing selection of multiple files)
This is an old input element which is not visible. Generally used to store derived values or pass data between sessions.
<input type="hidden">
Additional attribute form is available.
These are new HTML5 input elements related to date and time. Each of them is explained below:
Date:
Specify the date in format like 1996-12-19 (yyyy-mm-dd).
<input type="date">
Attributes available to this input type are form, autocomplete, autofocus, list and required as explained for “text” above. Additionally, the following attributes are available:
min: The minimum allowed value for the date
max: The maximum allowed value for the date
step: “any” or “+ve float” – the amount by which to increment or decrement date
Time:
Specify the time in format like 23:20:50.52 or 17:39:57 without time zone information.
<input type="time">
Attributes are same as “Date”.
DateTime:
Specify the date and time in the format like 1990-12-31T23:59:60Z or 1996-12-19T16:39:57-08:00 with time zone information.
<input type="datetime">
Attributes are same as “Date”.
DateTime-Local:
Specify the date and time in the format like 1985-04-12T23:20:50.52 or 1996-12-19T16:39:57 without time zone information.
<input type="datetime-local">
Attributes are same as “Date”.
Week:
Specify the week in the format like 1996-W16.
<input type="week">
Attributes are same as “Date” except step, which takes values “any” or “+ve integer” (instead of float)
Month:
Specify the month in the format like 1996-12.
<input type="month">
Attributes are same as “Date” except step, which takes values “any” or “+ve integer” (instead of float)
These are new HTML5 input elements for numbers.
Number:
Restrict the input to a number like 111.24
<input type="number">
Additional attibutes available are form, autocomplete, autofocus, list and required as for “text” above. Moreover, the following attributes are available:
min: The minimum allowable number (float)
max: The maximum allowable number (float)
step: The increment or decrement value (float)
Range:
Same as number but an imprecise control for the input value. Appears a slider.
<input type="range">
Attributes same as “Number”, except required is not available.
These are new HTML5 input elements for URL, Color and contact information.
URL:
An input element to enter an absolute url like http://www.html5trends.com/.
<input type="url">
Additional attributes available are form, autocomplete, autofocus, list, pattern, required and placeholder.
Color:
An input element to enter a simple color like #1234aa or #AB11C2. Color keywords are not allowed.
<input type="color">
Additional attributes available are form, autocomplete, autofocus and list.
Email:
An input element to enter an email address like foo-bar.zzz@example.com.
<input type="email">
Additional attributes available are form, autocomplete, autofocus, list, pattern, required, placeholder and multiple.
Tel:
An input element to enter one-line plain-text representing a telephone number.
<input type="tel">
Additional attributes available are form, autocomplete, autofocus, list, pattern, required and placeholder.
For complete reference, please visit this link: http://dev.w3.org/html5/markup/input.html
Related posts:
