How to Create Twitter Sign-up Html

As we all know HTML5 gives us some pretty useful feature . Today I am going to show the feature which gives a new look to Forms module.In Old version of html , Forms were pretty boring and you have to add some js file to validate the Form field.Html5 gives some feature by which we don’t have to add extra js file for validation(till now only works with Webkit).

To see the new features of HTML5 , just submit the form without filling any field.Now the form will submitted only when you have all the form fields correct , and you should keep that in mind that there is no use of javascript.

Now the form validation handled by HTML5 itself .Isn’t that Nice?

Now let go through the code.

Step 1 : Create HTML script

<form action="" method="post"> 
   <div id='name' class='outerDiv'>
 <label for="name">Full name:</label>
 <input type="text" name="name" required  />
 <div class='message' id='nameDiv'> Enter your first and last name. </div>
   </div>
   <div id='username' class='outerDiv'>
 <label for="number">Username:</label>
 <input type="text" name="username" required  />
 <div class='message' id='usernameDiv'> Pick a unique name on Twitter. </div>
   </div>
   <div id='password' class='outerDiv'>
 <label for="password">Password:</label>
 <input type="password" name="password" required />
 <div class='message' id='websiteDiv'>6 characters or more (be tricky!).</div>
   </div>
   <div id='email' class='outerDiv'>
 <label for="email">Email:</label>
 <input type="email" name="email" required />
 <div class='message' id='emailDiv'> We'll send you a confirmation.</div>
   </div>
   <div id='submit' class='outerDiv'>
        <input type="submit" value="Create my account" />
   </div>
 </form>

   Step 2 : Create CSS 

#twitter input:not(:focus){
 opacity:0.6;
}

#twitter  input:required{
}

#twitter  input:valid {
 opacity:0.8;
}  

#twitter input:focus:invalid{
 border:1px solid red;
 background-color:#FFEFF0;
}

Demo | Download | Read more