HTML5 Tutorial – New Input Types for Web Forms

May 15, 2013 admin Uncategorized 0

HTML5-logoHTML5 has several new input types for forms. These new features allow better input control and validation, less development time and an improved user experience.

The new input types we will be looking at are:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

HTML5 Tutorial : Color Input Type web forms

In many CMS and HTML UI we provide different color selection to user for Custom generated pages. Using HTML5 color input type we can easily implement UI selection. Here is the basic example which shows the color selection for background.

Demo for the color input type:

Select your favorite color:


 


/* Copy and Paste this code to implement and validate color input type: */
<!DOCTYPE HTML>
<html>
    <head>
        <title>HTML5 Form Example:Color</title>
    </head>
    <body>
        <form>
            <h2> Select your favorite color:</h2>
            <input type='color' id='color'/>
            <input type='button' id='button' value = 'Submit' onclick="colorcheck()" />

        </form>
        <script type = 'text/javascript'>

            function colorcheck()
            {
                // Returns Color code.
                var input1 = document.getElementById('color').value;
                alert("You have selected color:" +input1) ;

            }

        </script>
 </body>
</html>

Next Date Input Type >>