Twitter Sign-up Page using HTML5 And CSS3 (no js)
by nikesh 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.
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.
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.
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.
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…
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.
Are there any startup costs associated with becoming a Clickbank affiliate, such as web hosting? | Clickbank Affiliate Now
May 28th, 2010
[...] Twitter Sign-up Page using HTML5 And CSS3 (no js) – nikesh.me [...]
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.
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
phillip marlon michael jason ellis
Feb 17th, 2011
having nothing on the
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
Website Usability 22 Best HTML5 and CSS3 Form Exercises | Wap47.net
Dec 9th, 2011
[...] Twitter Sign-up Page using HTML5 And CSS3 (no js) [...]
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!
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
Improve Website Usability 30 Best HTML5 and CSS3 Form Exercises | Multy Shades
Sep 11th, 2013
[...] Twitter Sign-up Page using HTML5 And CSS3 (no js) [...]
mikmik
Nov 13th, 2013
you
seminary
Apr 28th, 2014
Very good write-up. I absolutely appreciate this site.
Continue the good work!
nicole
Nov 24th, 2014
hi
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!
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.