Post
Ask Question

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 describes 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 the 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
  1. <!DOCTYPE html >  
  2. <head>  
  3.      <title>Login Form</title>  
  4.      <style>  
  5.          * {  
  6.              margin: 0;  
  7.              padding: 0;  
  8.         }   
  9.          #main {  
  10.              height: 400px;  
  11.              width: 900px;  
  12.              margin: 0 auto;  
  13.              background: #999999;  
  14.         }   
  15.          ul {  
  16.              width: 300px;  
  17.              padding: 0px 0px 34px 65px;  
  18.              margin-left: 98px;  
  19.              list-style: none;  
  20.              box-shadow: 2px 4px 12px 2px;  
  21.         }   
  22.          label {  
  23.              width: 100px;  
  24.              float: left;  
  25.         }  
  26.      </style>  
  27. </head>  
  28. <body>  
  29.      <div id="main">  
  30.          <form>  
  31.              <ul>  
  32.                  <h2 style="margin-left: 54px;">Login form</h2>  
  33.                  <br>  
  34.                  <li>  
  35.                      <label>Email ID</label><input type="email" name="emailid" placeholder="[email protected]" required /></li>  
  36.                  <li>  
  37.                      <label>Password</label><input type="password" name="password" placeholder="password" required /></li>  
  38.                  <input type="submit" value="Login" />  
  39.              </ul>  
  40.          </form>  
  41.      </div>  
  42. </body>  
  43. </html> 
incd4.jpg


Similar Articles