Take Control of Your Forms with HTML5

‘ One should never trust data coming from the user side ’.

This assertion is true, especially when you are working with forms as a backend developer. When you create your website, you always come to a step where you must collect a certain amount of data from your future users ( name, location, age, etc). You certainly think about the forms already, but the real struggle is how to secure those forms.

Depending on the capacities of your WebHost server and on the amount of time you wish to lose, you can just create a classic form, without giving a damn about data validation and so on, letting the user type and send whatever nonsense they want to your server and fill your database uselessly. Or you can even let the data reach the server and write some long backend functions to validate them one by one…But why the hell will you do that?

Yeah, you need to validate the data before sending anything to the server. And the best way to that is by using the HTML5 form validators! I know I know that you were thinking about something more dynamic with Javascript and JQuery…But before you get to those tools, you ought to know that you may not necessarily need them for validation. Get the job done by the browser for you, by using these amazing validators and then reserve the most complicated validation for the Javascript and his/her children!!!

Check it out with me, here are some awesome links to good HTML5 validators that I am sure you did not care about before.

You can see some interesting information there, yeah, form validators are those attributes you never care about: minLength, maxLength, required, pattern… Some attributes like ‘type’ for the input, help you to force the user to stick at a data format. Let’s see an example. You are trying to get the user email address, how to make sure he doesn’t type an ‘ask-my-mom’ there?

<input type='email' name='email' placeholder='Enter your email, please'>

Try it and you will see, it’s as simple as it looks! Another attribute is ‘required’. This attribute makes sure the user fills the designated field before the form can be submitted. Yeah, some punks may just submit an empty form!

You may avoid that by just putting a ‘required’ attribute on your input, follows:

<input type='email' name='email' placeholder='Enter your email, please' required>

For sure, nothing will leak!

You may tell yourself that you have seen it all yet!! But nooo, you haven’t. I wanted to introduce to you the coolest form control among them: the ‘pattern’ attribute!

The pattern is an attribute that helps you to impose the data format or even the characters that the user must enter in an input. It takes a regular expression, commonly known as regex, as value. It works with email, text, tel and even password inputs. It’s great to force the user to choose a complicated password, or to force him to enter a correct phone number. If you do not know about regex, here is a great link to know more and to build your regex:

For example, I want to force the user to choose a password with at least one capital letter, one digit, and a special character. Here is what it can look like:

<input type="password" id="password" name="password" pattern="[a-zA-Z](\d+)(\W+)" maxlength="32" required>

You may try it and also create your own regex and test it on other form types.

HTML5 really offers you some great tools to secure your forms, with error messages which adapt to the type of error and the language of the user. And if you are a CSS lover, you can use some pseudo-classes like ‘: required’ or ‘: optional’ to style your form fields according to the situation.

The basics form controls are provided to you, though you may still need Javascript for personalized validator(e.g matching password fields), it is strongly recommended to use them beforehand. Save some time and some functions, and use HTML5 form validators. Check this repo to view the usage of some of them:

Give it some stars if you find the repo interesting. We appreciate contributions and comments too.