Form Validation in HTML5

In this article I explain form validation in HTML5.

Introduction 

Today you will learn how to validate a Login Form in HTML5 and CSS.

This sample uses the following two new HTML5 attributes:

  1. Placeholder attribute
  2. Required attribute


These attributes are supported by all major browsers.

images.jpg


Note: Internet Explorer 9 and earlier versions do not support them.

About Placeholder attribute

This attribute specifies a short hint that describe what type of value of an input field is accepted. The hint is displayed in the input field when it is empty and after clicking the field gets the focus. You can use all input types.


Cli2.jpg

About the Required attribute

The Required attribute is a Boolean Attribute because if you do not specify the input type then it shows an error. So you can say it is a Boolean Attribute.

Clip3.jpg

<!DOCTYPE html >
<head>
     <title>Login Form</title>
     <style>
         * {
             margin: 0;
             padding: 0;
        } 
         #main {
             height: 400px;
             width: 900px;
             margin: 0 auto;
             background: #999999;
        } 
         ul {
             width: 300px;
             padding: 0px 0px 34px 65px;
             margin-left: 98px;
             list-style: none;
             box-shadow: 2px 4px 12px 2px;
        } 
         label {
             width: 100px;
             float: left;
        }
     </style>
</head>
<body>
     <div id="main">
         <form>
             <ul>
                 <h2 style="margin-left: 54px;">Login form</h2>
                 <br>
                 <li>
                     <label>Email ID</label><input type="email" name="emailid" placeholder="raghw@gmail.com" required /></li>
                 <li>
                     <label>Password</label><input type="password" name="password" placeholder="password" required /></li>
                 <input type="submit" value="Login" />
             </ul>
         </form>
     </div>
</body>
</html>

incd4.jpg