Form Attributes, Form Validation and HTML5

HTML5 brought about several new elements and attributes that we didn’t have in HTML4.

Some of those elements being aside, article, and dialog. For a complete listing, you can review them here:  http://www.w3schools.com/html/html5_new_elements.asp

One of the improved features of forms in HTML5 is the form validation.  Previously, in HTML4, developers would have to code JavaScript client side validation in order to make sure all fields had input.  It could be a tedious task for developer to validate each field if they didn’t have the luxury of iterating through a for loop for each input type. Especially when it came down to validating radio buttons, check boxes, and then text fields. For a phone number, most developers would use just a plain text field. So then you didn’t just have to check if the field had text, but that it was numbers and that it followed the correct format for a phone number and so on. It was quite a bit of coding to validate a form.

HTML5 introduced the required attribute. Now, if that required attribute is added to any input type, then automatically upon submission, the form is validated to make sure there is data there.

So now, instead of seeing a javascript pop up like this one

You see a more aesthetically appealing message like below:

HTML5 added several new input types to make the developer’s life easier as well! These include:

• Color
• Date
• Email
• Tel
• Number
• Range
• color

I absolutely love the Tel input type and Date. These have made my life a lot simpler when validating this type of information.
For a complete listing of form input types, you can view them here: http://www.w3schools.com/html/html_form_input_types.asp

Despite the simplicity in client side validation with HTML5, we should not let that give us a false sense of security. It is what it is: Client side validation only. I cannot stress the importance enough of doing your own validation.  Let me Emphasize.  It is  still important to  validate your input on the server side!!  You, as the developer, should know your data and what type of data should come through the form. Don’t just assume that the values entered into the form are the same values being submitted to the server. The values can be changed during the transmission. A form can be bypassed and information submitted to a server with invalid information. Validate the data being received with what you know is supposed to come through. Check for SQL injection. Last thing you want is to live out “Little Bobby Drop Tables”.  Check to make sure valid email address formats are being provided; validate emails and check for email injection. The list goes on and on of things you can and SHOULD check for. All of the same security issues are still very much prevalent with HTML5 that were in HTML4. So, where our job in securing our web applications and forms hasn’t changed much, we have been given a little break for client side validation when it comes to forms thanks to HTML5!