Twitter Sign-up Page using HTML5 And CSS3 (no js)

by on 26/05/10 at 8:44 pm

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).

Below I have attached the snapshot , to view the original output please visit DEMO.

Social Icons

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.

HTML

<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>

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;
}

Here I have given only the important css pseudo classes -:valid, :invalid:, :required.
If you want to add any symbol or mark to show the field is required , just add them within :required pseudo class.
The code is self explanatory .if you have any query , do let me know.
Hope you guys like this post.

18 Responses to “Twitter Sign-up Page using HTML5 And CSS3 (no js)”

  1. Step

    May 26th, 2010

    If the user tabs through the fields, the initial message div stays on field that last had mouse focus (assuming mouse is left hovering over the name field, which is required to start typing). Of course the div messages don’t show at all if just keyboard is used – not sure how hard this would be to change.

    Might be good to also mention that server-side validation is still critical for security, even though that’s not the intent of your post.

    Thanks for showing off html5 form stuff. Can’t wait until it’s more broadly available.

  2. Matt Hooks

    May 27th, 2010

    I’ll re-iterate the issue with only using the keyboard to fill out the form.

    Also, you misspelled “Chrome” on the demo page.

  3. nikesh

    May 27th, 2010

    @Step … thanks for your input … and I am definitely going to find some way around to keyboard functionality…
    @Matt … thanks for pointing the typo error…

  4. Nathan

    May 27th, 2010

    Just a quick note about your html, it looks like your using xhtml. With xhtml you would need required=”required” or you can just leave off the / and use html. Not that it matters at all, but I been going over this stuff myself recently and realized the difference.

  5. BobLan66

    Nov 28th, 2010

    I have been studying HTML% and CSS3. From my research on the browser’s availability to rendering and accepting HTML5, Opera is the browser with the most compatibility.

    I will be glad when Form 2.0 is widely accepted, however I really fell it will not eliminate the need for server side validation. Too many ways for hackers to breach security if one does not use it. With that said, I believe HTML5 is heading in te right direction.

  6. robertcashman01

    Dec 2nd, 2010

    nothing to do with html5 but just wanted to let you know it is a nightmare trying to sign out of my account . i thought it was suposed to be more user friendly

  7. having nothing on the

  8. Cheap Email Marketing

    Sep 10th, 2011

    Don’t link on twitter without a title. Posting a link without a title doesn’t explain much and can often make people fearful of what’s on the other end

  9. [...] Twitter Sign-up Page using HTML5 And CSS3 (no js) [...]

  10. video rss

    Feb 6th, 2012

    My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can not believe simply how a lot time I had spent for this information! Thanks!

  11. Stouffer

    Oct 31st, 2012

    That is really attention-grabbing, You are an excessively skilled blogger. I have joined your feed and look ahead to searching for more of your fantastic post. Also, I’ve shared your web site in my social networks

  12. [...] Twitter Sign-up Page using HTML5 And CSS3 (no js) [...]

  13. mikmik

    Nov 13th, 2013

    you

  14. seminary

    Apr 28th, 2014

    Very good write-up. I absolutely appreciate this site.
    Continue the good work!

  15. nicole

    Nov 24th, 2014

    hi

  16. WindyCrayton

    Dec 20th, 2014

    My brother recommended I might like this blog. He used to be totally right. This submit truly made my day. You can not imagine just how a lot time I had spent for this info! Thank you!

  17. MelvinaHindley

    Dec 20th, 2014

    Hey There. I discovered your blog the use of msn. That is a really smartly written article. I will make sure to bookmark it and come back to learn more of your useful information. Thanks for the post. I will definitely return.

Leave a Reply