HTML 5 Forms and JavaScript

A number of the proposed additions to HTML offered by HTML 5 relate to forms. Some of these add missing form field types that are commonly available with forms on other platforms but which were only able to be implemented on the web using JavaScript. Other additions include attributes to make validating forms easier (without needing JavaScript) and to offer other form functionality that was only previously available through JavaScript. Basically the HTML 5 changes to forms reduces or completely removes the need to have JavaScript associated with forms. This is a good thing and is the part of the HTML 5 changes that I personally think is the most useful.

The problem with using JavaScript with forms is that not everyone has JavaScript enabled but everyone needs to be able to use forms. Having the form able to function properly and be validated in the browser without needing JavaScript means that those without JavaScript are still able to use the form in the same way as those with JavaScript. It also makes for more standard functioning of forms since a JavaScript solution needs to be custom written for each form and so the way that one form works and the way that another form for the same purpose works may be completely different where the functionality and validation is built using JavaScript. With HTML 5 both forms would use the same attributes with the same values to implement the same functionality and validation and so both would behave the same way.

Note that the new HTML does not do away with the need for the server side validation of the form. This remains just as important as any client side validation can be bypassed. Someone could replicate the form on their own computer, remove all the attributes that validate the form in the browser and then enter whatever they like before submitting the form. Even if you manage to restrict where the form can be submitted from to ensure they are using the copy on your site they can run JavaScript attached to their browser that modifies the content of the HTML in the web page to strip out the attributes from the form so as to be able to submit whatever they like. The new HTML 5 form field validation is no more a substitute for server side validation than JavaScript is, the main benefit is that it is easier to apply (you don't need to use JavaScript to do it) and anyone whose browser supports HTML 5 will have it apply even if they don't have JavaScript enabled.

The most obvious form field omitted from HTML when forms were first added is the combobox. HTML 5 has now added this form field via the list attribute in a regular type-"text" input field and the addition of a datalist with an id that the list attribute references to link them together as well as option tags to define all of the predefined options for the combobox. Prior to HTML 5 if you wanted a combobox the only way to create one was to use JavaScript.

Some of the new form field types (such as type="email" and type="url" look exactly like regular text inputs in web browsers running on the computer. On mobile devices they behave differently than regular text inputs because they provide custom versions of the virtual keyboard that contains those characters most likely to be needed in those fields. The big benefit in all cases though is that the field can be validated correctly without needing JavaScript and so the correct validation of those fields can be applied without needing huge JavaScript code to do it (see the textarea part way down my email address validation page for the regular expression that you'd need to provide an equivalent email validation without the new HTML 5 field type).

The new type="number" form field not only displays a custom virtual keyboard on mobile devices, it also allows min, max and step attributes to be specified that define the range of valid numbers that the field can contain so as to properly define what numbers are valid in the field making JavaScript validation unnecessary. In some browsers it even displays differently as a spinbox instead of a text field so that the value can be selected by clicking on the up and down arrows rather than by typing. Even though JavaScript is not needed to validate the field you can still interact with the field from JavaScript when you need to with additional methods being available for changing the value in the field - using stepUp() and stepDown() - as well as being able to access the content as a number instead of as a string using the valueAsNu8mber property. The type="range" works exactly the same as type="number" except that it displays as a slider rather than as a spinbox.

The type="date" (and datetime, datetime-local, month, week, and time) form fields implement a date picker and/or time spinbox that allows for dates (and times) to be entered by clicking rather than typing. This resolves the issue of people from different parts of the world expecting dates to be in one of three different orders where the order that the form owner expects is not necessarily the same as the order that the visitor uses.

The type="color" form field introduces a colour picker that provides lots of different ways to select a colour while ensuring that the value passed by the form is a standard six character hexadecimal representation.

The placeholder attribute provides a way to put text in a form field that will disappear when you start entering a value into the field (when it disappears varies between browsers - either when the field gets the focus or when you type your first character of input). This is really useful for forms that consist of a single input field plus submit button where you want the form to take up minimal space on the page (an example would be a search option). Previously it was necessary to use JavaScript to remove any placeholder text in the field value and if the person didn't enter a value in the field then the placeholder text would be sent with the form (which is not the purpose of placeholder text). Using this attribute means that the value displayed is not the field value and it will always be properly replaced by the field value that is entered. Of course you should not be using placeholders in forms that are a part of the main functionality of your page but that applied equally to the old JavaScript placeholder scripts as well.

The autofocus attribute allows you to specify which field in the form should get the focus when the web page first loads. This does away with all the potential issues that a JavaScript solution has. With JavaScript the script to give the field the focus must run after the form field has been created but needs to run as soon as possible after that so that the person can't start interacting with the form before the focus is applied. That means placing the script to set the focus immediately after the form field that is to get the focus which means jumbling the script in with the HTML. If you try to separate the JavaScript from the HTML by placing all your script tags at the bottom of the page then the rest of the HTML has to load before the focus is set and the person might have already typed a letter or two into the form by then only to have the focus shifted from where they are typing to elsewhere in the form. The HTML attribute resolves this problem.

The biggest impact that HTML 5 has regarding JavaScript and forms is regarding the validation of form fields where the validation is not implied by one of the new types. The pattern attribute allows a regular expression to be specified that defines what is and isn't allowed to be entered into the form field. This provides two ways that form validations can be added via the HTML. For common input field types all that is required is for the person creating the page to locate an already written regular expression that defines what is valid for a particular field and to attach that in the pattern attribute. This approach requires no knowledge of programming languages at all as it is simply a matter of copying and pasting the value into the attribute (just as can be done with many JavaScript that don't involve form field validation where people can just copy a script that is already written and use it in their page without having to know JavaScript). The other approach for those who do know one of the many programming languages that use regular expressions (such as JavaScript) is to simply write the regular expressions yourself. Using appropriate regular expressions can take care of most of the individual field validations for you completely leaving only the most complex of validations and validations involving multiple fields as the only ones that can't be applied directly in HTML. In most cases the really complicated validations are best left out of JavaScript anyway and performed only on the server as the overhead of the JavaScript that everyone has to load to detect rare errors makes the form far less user friendly than having to reload the page to display the error in the rare instance where it does occur would. That leaves only cross field validations of form fields as the remaining area where JavaScript would still be needed.

The one new HTML 5 form field attribute that seems to serve no purpose is required. That attribute would be useful if it were not that HTML 5 has also added the pattern attribute. As it is easy to specify in the regular expression whether the field is required or not a separate attribute that can potentially specify contradictory conditions seems superfluous.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow