HTML5 Custom Tags

The HTML5 allows you to customize an input tag. The HTML input tag can be modified to allow custom validation in a more streamlined way when compared to old approach.

Let us examine how custom validation worked with the older versions of the HTML. We will take simple Social Security validation input form element and try to apply validation so that only letters can be inserted into our input form tag. 

Old way of validating SS form’s input tag:  

    <script>

    function  checkSSN(value) {

                var checkVal = ^\d{3}-\d{2}-\d{4}$;

                if (!checkVal.test(value)) {             return false; }

                return true;

    }

    </script>

                 

    <form onsubmit="if (checkSSN(this.SSN.value))   { alert(this.SSN.value + ' SSN # is valid'); } else { alert(this.SSN.value + ' SSN  # is not valid'); }">

    <input type="text"  size="15" name="SSN" />                            

    </form>

The HTML5 custom input validation can be implemented in simpler way and less coding. The new HTML5 input tag 

The HTML custom type has new attribute called "patter". We can associate regular expression from the above code with this attribute and the HTML5 framework will take care of all the extra processing that we had to do ourselves with the help of JavaScript. 

Let us rewrite the above HTML custom validation of the input tag in HTML5

<input type="text" name="ssn" pattern="(^\d{3}-\d{2}-\d{4}$)"/>

We are able to accomplish SS number validation with less code and very clear fashion. This code is easy to read and understand for someone who is going to support it after original developer leaves.   

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …