Html5 Tutorial : Forms
Previously called Web Forms 2.0, HTML5 forms are going to make the creation and validation of forms easier than before.
- Web Application use forms to gather input from users
For instance, a form allow users to:
- Leave a comment on a blog article
- Book a flight
- Sign in to a web site
- Etc…
Controls that most of Web Applications require are:
- Date
- Phone number
- URL
- Sliders
Moreover, often times Web Application also require:
- Auto focus on an element of the form
- Give hint to user on what information they should give and how
- Handling minimum/maximum values for some controls
- Force the user to enter a value on a form
Display error messages to their users
- When they do not provide required information
- When the provided information is in the wrong format
- Validate the form on the client side to prevent sending the form to the server if there are errors on the form
![[Note]](../images/note.png) | Note |
|---|---|
As a rule of thumb, form validation on the server should always exist anyway since JavaScript can be disabled on some client browser |
| Note |
|---|---|
All of this is possible to do without HTML5 but it is really cumbersome |
- There are a lot of limitations with HTML4, it does not fit Web Applications need today
Custom controls that does not exist natively such as date picker or slider are provided using third-party libraries (JQuery, MooTools, etc…)
- That adds libraries to learn
- JavaScript might be disabled on some client browsers
Validation on the client side is quite complicated for some controls
- Usage of regular expressions for many common used information (email, url, phone number)
- HTML5 comes with new controls to ease the creation of forms
There are thirteen new values for the
typeattribute:<input type="color" />: To choose a color-
<input type="date" />: To choose a date (year, month and day) with no timezone -
<input type="datetime" />: Same as choosing a date but include the time (hour, minute, second, fraction of second) but the user cannot change the time zone offset -
<input type="datetime-local" />: Same asdatetimeexcept that the user can change the time zone offset -
<input type="month" />: To choose only a date and a month -
<input type="time" />: To choose a time (hour, minute, second, fraction of second) <input type="week" />: To choose a year with a week number for this year-
<input type="email" />: To enter an email -
<input type="number" />: To enter a number. Can be combined with other attributes such asminto define min value,maxto define max value andstepto define the increment <input type="range" />: Displays a slider-
<input type="search" />: No real difference with atextinput except that the display might look different (rounded corners in Safari on the Mac) -
<input type="tel" />: Looks like atextinput except that the purpose is for entering phone number -
<input type="url" />: Looks like atextinput except that the purpose is for providing a URL
| Input types on iOS |
|---|---|
Safari mobile on iOS shows different types of keyboard depending on the input type (for instance the dial pad is shown to the user to enter a phone number when using |
Along with new input types, HTML5 comes with new attributes such as:
-
autofocus: Boolean that give automatically the focus on a control. There should be only one control focused per page placeholder: This attribute allows developers to give a hint to the users on what information to provide (might be an example value for instance)<input type="text" id="firstname" placeholder="Type your first name here" />
would produce:
-
required: Boolean that specify if a user input is mandatory on a control. If a user tries to submit a form that have an empty input for a control that have therequiredattribute, the browser will not allow the submission of the form -
multiple: For instance,<input type="file" multiple>allows a user to send multiple files -
pattern: A developer usemailtype for email orurlfor URL input but what if a developer want something specific to his/her needs?patternallows the developer to use a regular expression and value entered by a user will have to match this pattern -
autocomplete:autocompletehave two values:onandoff. Can be applied on the entire form (onby default) and on controls. It can be good to remember previous values entered by users. Developers should consider this attribute carefully (sensitive data such as credit card number should not be remembered ⇒ set tooff). -
minandmax: Respectively define minimum and maximum values for controls. That works fornumbertype but can also be applied to other input types such asdate step: Define the increment number fornumberinput type. For instance, the following code snippet would only accept the following values(0,2,4,6,8 and 10):<input type="number" min="0" max="10" step="2" value="0" />
list: To reference a<datalist>element by itsidattribute. the<datalist>element contains a list of values.<input type="text" list="fruit" /> <datalist id="fruit"> <option value="Apple"> <option value="Banana"> <option value="Cherry"> </datalist>
would produce:
-
Form validation can happen in many places:
- On the client-side using JavaScript to avoid unnecessary round trip between the client and the server
On the server-side with any server side language (Java, PHP, ASP.NET and others)
Note Again, always validate user data on the server-side since JavaScript can be disabled on some clients
Verifying that the data entered is in the expected format can be really difficult. To do that, regular expressions are used. Below is for instance a really complicated regular expression to validate email:
[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?-
HTML5 provides automatic form validation and you can add constraints to your form elements using some of the previously discussed attributes (
required,pattern,maxlength,type,minandmaxthat can be combined withstep) Here below are some examples of form validation:
<input type="email" required/>whererequiredwill indicate that a value must be supplied
Moreover, constraint validation depending on the
typeattribute forurloremailexpect the value to be in the right format. For instance using<input type="url">and providing a value which is not a URL would have the following effect:
<input type="number" min="0" max="100" step="5"/>whereminand/ormaxattributes are delimitating the boundaries of a value.stepwill just allow certain values (here 0, 5, 10, 15, 20, etc…):
Note Form validation can be disabled either on the entire form using the
novalidateattribute or theformnovalidateon a<input type="submit"/>Using JavaScript and the constraint API, you can do complex validation for your form. Form elements such as
<input>have some properties and methods that can be used in your client-side scripts such as:-
willValidateproperty:truefor<button>,<fieldset>,<input>,<keygen>,<object>,<output>,<select>and<textarea> -
validityproperty: is aValidityStateobject containing the validity states of the element (valueMissing,typeMismatch,patternMismatch,tooLong,rangeUnderflow,rangeOverflow,stepMismatch,customErrorandvalid) -
validationMessageproperty: Message that describes any constraint failure -
checkValidity()method: Method that returns a boolean saying if the element satisfy its constraint or not. This method when called on the<form>element will returntrueif all elements nested in the form are valid -
setCustomValidity()method: Method that will set the custom error message for an element of the form. An empty error message reset the error message to the default
-
Each browser has different support for new input types and attributes that are related to HTML5 forms.
- We can of course check http://caniuse.com/#search=forms but there is also this website more specific to HTML5 form for checking support: http://www.miketaylr.com/code/input-type-attr.html
-
It is important to know that input types that are not supported on a browser automatically fallback to
<input type="text"> - So far, Opera is the one that has the most complete support
