How to Code Forms That Validate Using HTML5

I wanted to share a tip with you for those of you who have websites that run on HTML5.  Traditionally in HTML 4 and its predecessors if you wanted to do validation on web based forms on your website that collect information from your visitors you had to reference and/or code JavaScript that would then validate what a user enters onto the form when they submitted it.

Now with HTML5 you can do a number of things to validate your website’s forms from simple validation by making a field required to adding fields on your web form that are structure specific like email fields and others.  Let’s have a look at a few examples starting with simple form validation.

<input type=”text” required>

When using the “required” attribute in HTML5 what this does is makes this field as required using boolean logic. Simply set it up with the required keyword and you are done.

Now let’s look at a few more input types to help you validate your website forms using HTML5 including email and url.

<input type=“email” …/>

The email input type field on a web form looks at the structure of what is entered to ensure that it follows the structure of an email address whereas the url input type checks to ensure that the characters entered in the text field use the structure of a url.

<input type=“url” …/>

I hope that these tips help your website to use the features and functions of HTML5 to make things easier for you and your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.