HTML5 Forms Styled With CSS3

Let me start by saying that HTML5 and CSS3 are two different things. Secondly HTML5 is still just HTML and CSS3 is still just CSS. I’ve been noticing that people are confusing these two specifications with each other and making it more complicated then it is.

HTML5 is a set of new specifications added to already existing HTML specifications, plain and simple. CSS3 are the newest specification of CSS, such as box-shadow, text-shadow, transition, etc. We still use HTML to structure content and now with the HTML5 specification we can handle dynamic data such as geo-location for example. CSS is still used to style and create nice effects like shadows, nicer mouse-overs, without needing Javascript. and the old regular things such as color, margin, floats, etc.

Remember HTML5 is HTML, the new doctype; <!DOCTYPE html> is backwards compatible. If you like me always coded using the XHTML way, it is still valid. There aren’t any issues with closing your tags, personally I find it neater and easier to keep the code error free.

But besides all technicality, it will continue to be HTML5 pure for marketing purposes, that’s why the W3C has commissioned a logo to represent HTML5.

html5 logo

Now lets take a look at creating forms using HTML5. While browser support isn’t 100% yet that we can forgo Javascript, we are getting close. There are now standard field attributes to recognize an email address input, placeholder text, autofocus and more.

Once you have created your barebone form it is time to style it with CSS. Add some gradients to the fields, create a nice image free button and use some nice font.

The HTML5 code

A Form of Madness

How to Build Cross-Browser HTML5 Forms

Have a Field Day with HTML5 Forms

Fun with HTML5 Forms

The CSS3 code

Styling a Simple Form using CSS3

Using CSS3 to style forms written in HTML5

Customizing web forms with CSS3 and WebKit

  1. By Chris Huff posted on February 7, 2011 at 8:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Good, helpful resources. Thanks. I did have a question about something you said, though. You mentioned that since browser support isn’t 100% yet, we’ll still have to incorporate some JavaScript. At what point can we stop using JavaScript in our forms? Even when the latest browsers do support HTML5 and CSS3 fully, there will still a significant number of internet users who use older browsers, and it will always be a matter of weighing the trade-off between development and accessibility for all users.

  2. By g.evans posted on February 8, 2011 at 9:46 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice to hear about some new things which HTML5 and CSS3 are bringing to the table. My knowledge of HTML5 is pretty limited but this has given me a little bit more of an insight into what is capable of being achieved with the latest versions.

    I particularly like the rounded edges and subtle gradients. However, like chris has mentioned about the javascript, would you say it is better to just use background image corners to achieve rounded corners in all browsers? Or should we start moving people forward into 2011 with the language of HTML5 and CSS3…

  3. By nikola arezina posted on February 8, 2011 at 1:19 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I just making my first HTML5 site, I’ve came to the forms :) nice resource. I’ve already found some of these, but it’s nice to have it at one place

  4. By Hyde posted on February 8, 2011 at 4:09 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    You are right Chris. The use of Javascript will depend on the target audience. Currently browser vendors are pushing out updates really fast compared to a few a years ago. W3C is now actively marketing the use of HTML5. All modern browsers use an update alert to make users aware that they should update.

    But choosing what to implement in a website is always in consideration of the target audience.

  5. By Ahmad Alfy posted on February 9, 2011 at 12:16 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve been using jQuery.html5form for sometime now and it’s working perfectly
    Making the HTML5 behave well on old browsers.


  6. By Lucica posted on February 16, 2011 at 2:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi, thank you for mentioning our CSS3/HTML5 tutorial from CssGallery.info.

    I would like to mention that I don’t see why all the talking about Javascript: you can do server side validation with a bit of ARIA to improve the UX and the accessibility of the site. For the rounded corners in Internet Explorer you might wanna use CSS3 PIE and skip the JS which will probably add more load than you might want and need. These will work very well on all browsers, all devices and for all visitors which means improved accessibility and sexy looks :)

  7. By Taimur Asghar posted on February 16, 2011 at 6:26 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent resource! HTML5 is future.. !

  8. Trackbacklinks for 2011-02-08 « 個人的な雑記10 jQuery Scripts To Optimize Forms | DevloungeHigh Quality HTML and CSS Templates | Devlounge