Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with.
Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.
Here’s what we’ll be creating:
The form. (Icons from Chalkwork Payments)
Meaningful markup
We’re going to style a simple payment form. There are three main sections on this form:
- The person’s details
- The address details
- The credit card details
We are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids:
email, for the email fieldtel, for the telephone fieldnumber, for the credit card number and security coderequired, for required fieldsplaceholder, for the hints within some of the fieldsautofocus, to put focus on the first input field when the page loads
There are a million more new input types and form attributes on HTML5, and you should definitely take a look at what’s new on the W3C website. Hopefully this will give you a good idea of how much more fun form markup can be.
A good foundation
Each section of the form will be contained within its own fieldset. In the case of the radio buttons for choosing the card type, we will enclose those options in another nested fieldset.
We will also be using an ordered list to group each label / input pair. This will provide us with a (kind of) semantic styling hook and it will also make the form easier to read when viewing with no CSS applied:
The unstyled form
So here’s the markup we are going to be working with:
<form id=payment><fieldset><legend>Your details</legend><ol><li><label for=name>Name</label><input id=name name=name type=text placeholder="First and last name" required autofocus></li><li><label for=email>Email</label><input id=email name=email type=email placeholder="example@domain.com" required></li><li><label for=phone>Phone</label><input id=phone name=phone type=tel placeholder="Eg. +447500000000" required></li></ol></fieldset><fieldset><legend>Delivery address</legend><ol><li><label for=address>Address</label><textarea id=address name=address rows=5 required></textarea></li><li><label for=postcode>Post code</label><input id=postcode name=postcode type=text required></li><li><label for=country>Country</label><input id=country name=country type=text required></li></ol></fieldset><fieldset><legend>Card details</legend><ol><li><fieldset><legend>Card type</legend><ol><li><input id=visa name=cardtype type=radio><label for=visa>VISA</label></li><li><input id=amex name=cardtype type=radio><label for=amex>AmEx</label></li><li><input id=mastercard name=cardtype type=radio><label for=mastercard>Mastercard</label></li></ol></fieldset></li><li><label for=cardnumber>Card number</label><input id=cardnumber name=cardnumber type=number required></li><li><label for=secure>Security code</label><input id=secure name=secure type=number required></li><li><label for=namecard>Name on card</label><input id=namecard name=namecard type=text placeholder="Exact name as on the card" required></li></ol></fieldset><fieldset><button type=submit>Buy it!</button></fieldset></form>- Source: /code/have-a-field-day-with-html5-forms/1.txt
Making things look nice
First things first, so let’s start by adding some defaults to our form by resetting the margins and paddings of the elements and adding a default font to the page:
html, body, h1, form, fieldset, legend, ol, li {margin: 0;padding: 0;}body {background: #ffffff;color: #111111;font-family: Georgia, "Times New Roman", Times, serif;padding: 20px;}
Next we are going to style the form element that is wrapping our fields:
form#payment {background: #9cbc2c;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;padding: 20px;width: 400px;}
We will also remove the border from the fieldset and apply some bottom margin to it. Using the :last-of-type pseudo-class, we remove the bottom margin of the last fieldset — there is no need for it:
form#payment fieldset {border: none;margin-bottom: 10px;}form#payment fieldset:last-of-type {margin-bottom: 0;}
Next we’ll make the legends big and bold, and we will also apply a light-green text-shadow, to add that little extra special detail:
form#payment legend {color: #384313;font-size: 16px;font-weight: bold;padding-bottom: 10px;text-shadow: 0 1px 1px #c0d576;}
Our legends are looking great, but how about adding a clear indication of how many steps our form has? Instead of adding that manually to every legend, we can use automatically generated counters.
To add a counter to an element, we have to use either the :before or :after pseudo-elements to add content via CSS. We will follow these steps:
- create a counter using the
counter-resetproperty on theformelement - call the counter with the
contentproperty (using the same name we’ve created before) - with the
counter-incremetproperty, indicate that for each element that matches our selector, that counter will be increased by 1
form#payment > fieldset > legend:before {content: "Step " counter(fieldsets) ": ";counter-increment: fieldsets;}
Finally, we need to change the style of the legend that is part of the radio buttons group, to make it look like a label:
form#payment fieldset fieldset legend {color: #111111;font-size: 13px;font-weight: normal;padding-bottom: 0;}
Styling the lists
For our list elements, we’ll just add some nice rounded corners and semi-transparent border and background. Because we are using RGBa colors, we should provide a fallback for browsers that don’t support them (that comes before the RBGa color). For the nested lists, we will remove these properties because they would be overlapping:
form#payment ol li {background: #b9cf6a;background: rgba(255,255,255,.3);border-color: #e3ebc3;border-color: rgba(255,255,255,.6);border-style: solid;border-width: 2px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;line-height: 30px;list-style: none;padding: 5px 10px;margin-bottom: 2px;}form#payment ol ol li {background: none;border: none;float: left;}
Form controls
Now we only need to style our labels, inputs and the button element.
All our labels will look the same, with the exception of the one for the radio elements. We will float them to the left and give them a width.
For the credit card type labels, we will add an icon as the background, and override some of the properties that aren’t necessary. We will be using the attribute selector to specify the background image for each label — in this case, we use the for attribute of each label.
To add an extra user-friendly detail, we’ll add a cursor: pointer to the radio button labels on the :hover state, so the user knows that he can simply click them to select that option.
form#payment label {float: left;font-size: 13px;width: 110px;}form#payment fieldset fieldset label {background:none no-repeat left 50%;line-height: 20px;padding: 0 0 0 30px;width: auto;}form#payment label[for=visa] {background-image: url(visa.gif);}form#payment label[for=amex] {background-image: url(amex.gif);}form#payment label[for=mastercard] {background-image: url(mastercard.gif);}form#payment fieldset fieldset label:hover {cursor: pointer;}
Almost there! Now onto the input elements. Here we want to match all inputs, except for the radio ones, and the textarea. For that we will use the negation pseudo-class (:not()). With it we can target all input elements except for the ones with type of radio.
We will also make sure to add some :focus styles and add the appropriate styling for the radio inputs:
form#payment input:not([type=radio]),form#payment textarea {background: #ffffff;border: none;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;font: italic 13px Georgia, "Times New Roman", Times, serif;outline: none;padding: 5px;width: 200px;}form#payment input:not([type=submit]):focus,form#payment textarea:focus {background: #eaeaea;}form#payment input[type=radio] {float: left;margin-right: 5px;}
And finally we come to our submit button. To it, we will just add some nice typography and text-shadow, align it to the center of the form and give it some background colors for its different states:
form#payment button {background: #384313;border: none;-moz-border-radius: 20px;-webkit-border-radius: 20px;-khtml-border-radius: 20px;border-radius: 20px;color: #ffffff;display: block;font: 18px Georgia, "Times New Roman", Times, serif;letter-spacing: 1px;margin: auto;padding: 7px 25px;text-shadow: 0 1px 1px #000000;text-transform: uppercase;}form#payment button:hover {background: #1e2506;cursor: pointer;}
And that’s it! See the completed form.
This form will not look the same on every browser. Internet Explorer and Opera don’t support border-radius (at least not for now); the new input types are rendered as just normal inputs on some browsers; and some of the most advanced CSS, like the counter, :last-of-type or text-shadow are not supported on some browsers. But that doesn’t mean you can’t use them right now, and simplify your development process. My gift to you!
Comments
Got something to add? You can just leave a comment.
03/12/2009
Glad to see forms can be so fun :)
03/12/2009
Attribute selectors, pseudo classes such beautiful things and it degrades nicely. Nice work.
Although Opera uglies up the form with their gawdy icons for the HTML5 input types, especially email.
03/12/2009
I had forgotten about the counter-increment and counter-reset properties. Thanks for the refresher.
03/12/2009
A really nice article, I’m loving the new placeholder item.
Thanks!
03/12/2009
I remember some years ago when just aligning labels and inputs was a PITA, but now with all the fanciness HTML5 and CSS3, it’s possible to make forms pretty and more usable again.
Thank you for the tips, and showing a few hidden tricks on applying selectors to forms!
03/12/2009
thanks for making forms seem a little less scary that what they need to be… really liked the article.
03/12/2009
In your example, that does not work in Opera (not even in V10.10).
But if you remove the :hover pseudo-class from the selector you’ve used – then it will work in Opera, too.
(And applying the cursor-property only on :hover is redundant, anyway – when else will the appearance of the cursor be affected, if not when it’s over the element…? ;-)
So you probably might wanna fix this little thing in your article and example.
Besides that – nice work, fine article!
Cheers,
Chris
03/12/2009
Great writeup Yaili – I always wonder what the best way is to markup a form and it’s easy to forget stuff too like the focus state. Good to have a walkthrough like this to go through, especially with some HTML5 goodness.
Nice work!
03/12/2009
That placeholder attribute is teh awes. Am I right in seeing that only Safari treats this attribute properly?
03/12/2009
I like forms so much and now I can to see how powerful it can be with a little of html5 and css3.
Find a way to tell for some clients we don’t need to every browsers show up the same layout is far complex.
Thanks Yalli.
03/12/2009
Seeing HTML5’s new form elements breathes new life into my soul. I cannot tell you how often I’ve cursed form development. No more! Long live HTML5!
Thanks for a great article, Yaili.
03/12/2009
I’ll be glad when we can rely on placeholder being available in the majority of browsers rather than having to resort to js methods.
Just a comment on the generated content for legends: I’m of the opinion that anything that is actually content should be in the HTML and not generated by CSS and it seems that the steps of a form would be a fairly important piece of content (which would not available if stylesheets are off).
03/12/2009
I’ve been dealing with styled forms for the past few months at my job. To some degree, Yalli, i’ll agree with you – forms are a great challenge to match the design since you have all these predefined elements that are integrated into different browsers in turn yielding different results.
Anyway, are there any techniques for styling drop down menus as well? I have found that those are the hardest things to deal with.
glad to see 24 ways back up =)…can’t believe it’s that time already!
03/12/2009
Good article ! Well explained and complete .
I didn’t know the HTML5’s new input types and attributes.
Happy to see that 24 Ways’life continue :)
03/12/2009
Great read Inayaili, I’m really impressed with some of your techniques. One way of improving the CSS though: instead of overwriting background and border styles for “ol ol li” you could specify them only for “ol > li”. Works in IE7+ and the good rest too, of course. :)
03/12/2009
Great example! Nice to see someone else using lists to style the form. We’ve been doing that for a while where I work.
You have used an ordered list here but I think that suggests that all the fields are required. They might be in this example but generally I use an unordered list.
But we could argue semantics all day. Good article, thanks!
03/12/2009
Very nice, especially the use of placeholder attributes. A great example of how HTML5 will make our jobs easier and make sites more universal/accessible.
A quick summary of current browser support for some of these elements would have been nice though :)
I had a quick Google and found Mike Taylor’s input attribute test page – http://www.miketaylr.com/code/input-type-attr.html – Do you know of anyone keeping a list of HTML5 tag + attribute browser support on the web?
03/12/2009
Brilliant Yaili – This was a great article on HTML5 forms!
Thanks
@seandelaney
03/12/2009
It’s great to see some of the new HTML 5 stuff in action.
What i’m struggling to get is how some of the new attributes work for the form submission. Take the required attribute for example, how do you use that for validation, is it only useful for javascript validation that can check the attribute exists or is there a way in which it works with server-side validation too?
03/12/2009
Great post, i’ve been tinkering with HTML5 and re-designed and developed my site in it. This is one of the first posts I have come across that talks about forms and the new elements.
Thanks
03/12/2009
Not sure if I’m missing something here but pressing Buy It doesn’t throw up any errors for me? Only wondering because some elements have required on them.
Or was this article simply an introduction into the new elements? If so, my bad.
03/12/2009
Great overview of some of the HTML form attributes, I can see HTML5 making my life much easier when its viable = when IE catches up.
03/12/2009
This is a great little tutorial.
It’s looking like HTML5 is going to make codeing forms a lot simpler and more fun.
Where you have changed the cursor to pointer on the radio buttons, the pointer turns back into an arrow when you actually try to click the radio button.
It’s a shame that the hints don’t work in Firefox. Such basic usability as this means that it will be a long time until we can actually use this function. Until then we should continue to have content within the fields and use javascript to clear them on focus.
Thanks for the interesting read
03/12/2009
Nice article, a great example of the goodness that is to come from HTML5 web forms.
It would be nice if this article went a little further, for example – showing that we can use CSS to style fields that use Boolean attributes e.g. [required] {border:2px solid red;}
Also, we can use scripts like Modernizr to detect which browsers support these new input types, and provide regular JS form validation for browsers that don’t.
I think the forms module is one of the most appealing aspects of HTML5 for me, and I wish browsers makers would adopt implementation further.
03/12/2009
Some superb tips here, and lovely forward thinking use of negated attribute selection. I’m still sometimes stuck in the mindset of adding classes to things for selector targetting, but I really need to follow your examples and make more use of selectors themselves.
Regarding cursor states – as ChrisB has said above, the cursor property shouldn’t be set on the :hover pseudoclass as this is a bit nonsensical. Also, why only set cusor: pointer for the radio labels? It’s just as valid to use this enhancement on every label on your form.
03/12/2009
Good form guide Yaili – Thank You! Based around your theory for giving a pointer upon hovering over the option labels… Great idea, personally I would extend this and also give a pointer for the option button itself. Changing the following…
to…
which would provide a pointer for all radio buttons on the payment form.
03/12/2009
Great article.
Lovely to see some progressive enhancement applied to that oft neglected (but oh so necessary) bastard love child of HTML – the form – and also some nice new HTML5 and CSS3 thrown in for good measure.
Only thing I’d question is the use of ordered list to markup the label/inputs. Is this really any more semantic than using paragraphs?
03/12/2009
Nice article, some neat tricks too.
Just one question, why not put the <input> inside the <label>, styling the label as a block and floating the input right (or something like that)?
That way you could get rid of the complete <ol> and it’s li’s and it would be just as valid and semantically correct. You then could even leave out the for=”(input)” in the labels.
03/12/2009
I’m going to keep this short and sweet. Yailli, that was a great little article. It’s definately one of my favourite 24ways articles.
03/12/2009
@Kean
Neither – the attribute is there to tell the browser to take care of the validation itself. No javascript needs to be involved, this is part of HTML5. I believe Opera has support for this already, and others won’t be far behind. You can bolt on some JavaScript checking until there’s broader support, looking for that required attribute and applying functionality accordingly.
03/12/2009
Nice work Yaili, HTML5 forms is something we’re planning to cover on HTML5 Doctor soon with a bit more about the new input types and attributes so it’s great to see you spreading the word.
I must say I kind of agree with John Faulds about the generated content though.
I should also add, it’s important to note that you can use these new input types now and they will work in browsers that support them (Opera & some i Safari) or will degrade gracefully to standard text fields in other browsers.
03/12/2009
I appreciate all the effort you went to in this post, but until HTML5 is universally supported it’s pretty much an unachievable standard.
It’s like getting the car of your dreams and finding out the roads are too narrow. You’ll never be able to drive it until the infrastructure is up to speed…we all know what I’m getting at…
Die IE6, you’re stopping the whole world from moving on!!
03/12/2009
I don’t think that “Card number” and “Security code” is the type=“number” strings. It’s more like phone number — combination of digits or string of digits, but not actual quantity of something.
You should have a look at your example in latest Opera, especially at the arrow controls at the end of type=“number” fields.
03/12/2009
Maybe the title of this post should be “Have a Field Day with CSS3 Forms” instead.
You just used the new doctype and the “placehoder” attribute so there’s not particular benefit (and difference) respect a normal XHTML1.0 Strict document.
HTML5 provides new input type elements, not supported by any browser yet. When these input will be implemented we’ll have great fun for sure.
Anyway, it’s always a good example of what we can achieve on modern browser unsing css3
03/12/2009
Great article, thanks!
I hadn’t come across the counter in CSS3 before. Is it just me, or does the concept of a counter in CSS not seem quite right?
The more abilities that CSS gets (like content:, counter and animations), the more it feels like it’s turning into some kind of pseudo scripting language rather than a list of styles. It’s blurring the lines between style and it’s two friends content and behaviour.
And while there are arguments for and against these new features that’s the way it seems to be heading yet we still don’t have the ability to set variables which would be so useful!
Maybe in CSS4? <sigh>
03/12/2009
this will be a better world for developers when allmost browsers render html5 at least most of it.
yes Opera is the one that supports required fields and trigger the warnings but it trigger too some others details in some type fields. like type email he shows an email icon.
Generate content via css in the legends to create an order does not make much sense, to do that we could place within an ordered list, because without CSS we’ll see the order or it will as part of the content.
And other thing I would take the auto focus of the first input because when page is rendered the text of placeholder disappears immediately.
But the way it was done the form is amazing and will be more in the future.
Congratz
03/12/2009
That was a fantastic article, many thanks for it. Instead of just zeroing margins & padding, though, I always recommend Eric Meyer’s CSS Reset, as it’s reduced my time tweaking various versions of IE by well over 70%. Perhaps it’s the use of this reset that makes me think that forms aren’t the bugbear that others seem to; in any event, the combination of HTML5 & CSS3 makes for remarkably clean markup.
It was interesting to see what the forms looked like in IE (6, 7 & 8), but everything was very usable. I was especially pleased to see how successful the form was in IE8, especially now that it appears to be passing IE7 in numbers. (IE6 still leads, though, for those coding for client-focused web apps).
03/12/2009
What Vadim said. Think of type=“number” as type=“integer” or type=“float” — an HTML5 compliant browser will strip leading zeros and may even reformat the number, so if you type in “012300”, it can get sent to the server as “1.23e+4”.
Not to mention that a spin button widget looks really silly for a credit card field. :-)
If you want validation of the credit card field, use pattern=”“.
03/12/2009
Great writeup Yaili… and great markup! It’s nice to see forms done the right way and nicely styled at the same time.
03/12/2009
Wow! I’m amazed by the loveliness of all your comments, thanks!
To reply to some of you:
@ChrisB , @Ben Bodiem : You are right. If the cursor:pointer property is set on the normal label selector it works in Opera. Thanks for pointing that out!
@Ben Chinn : Yes, only Safari renders the placeholder for now, so it’s not a good idea to use it for very important content, I suppose.
@John Faulds , @Rich Clark : I agree that that may not be the perfect usage of the content/counter, but I suppose that it’s okay as an example of what it can be done with it.
@Dale : Thanks! I’ve quietly avoided styling the select element, shh… :) Doing a quick search on Delicious, I can see some examples of how to style it using JavaScript. Let me know if you find any great techniques.
@Peter : You are correct too. But IE6 wouldn’t like that.
@Simon R Jones : If you take a look at these specs, there is some indication of which browsers support what. Beware, the page is really, really slow to load :(
@Kean : Ben Bodien explains it better than me
@Chris Mahon : The form is focused on the HTML and CSS, not what happens when you actually press the “Buy it!” button :)
@Alex Gibson : I could’ve added soooo much more HTML and CSS stuff in there! I had to refrain myself a bit, or there would be enough material for a book! I use Modernizr often on my projects.
@Cole Henley : We could have a discussion of which is the best element to wrap around the input/label pair. Some people prefer paragraphs, others divs or lists. I accept all of them as correct, but others may disagree.
@Adam C : Oh, Adam! Where’s your Christmas spirit? :)
@Ray Drainville : I too would recommend a proper CSS reset when creating a site, but for this example, that was all we needed.
@Vadim Makeev , @Zcorpan : You are probably right. Why not write a post about it? I’d love to read that :)
03/12/2009
I have to say that I haven’t found anything that I like about HTML5 until now. The placeholder attribute is rather nice.
New input types seem rather redundant to me. Though, to each his own. I’m all for semantic code, but HTML5 is doing it wrong. I’ve read (most of) the spec, and I’m not impressed.
I, for one, will be sticking with XHTML1 for the foreseeable future.
However, all that aside… The CSS is great: looks good, seems to degrade nicely. Good article Yaili.
03/12/2009
Excellent article, I like the CSS, however I believe we should not use specific browser instructions and that the mark up could have been a little more compact. Other than that is cool.
03/12/2009
Evidently border-radius and more CSS3 goodness is (finally) coming to Internet Explorer in version 9, so that will increase the browser support for these bits.
03/12/2009
I have actually been enjoying styling forms, but this brings it to a whole other level! thank you so much! Great article.
03/12/2009
Opera having support for many of the HTML5 form inputs and features already is fantastic.
My only concern is how Opera adds icons to the email and url fields. Though I recognise the usability features of this, I would just like to see a way to change the icon or even remove it.
03/12/2009
I’m not sure I’m 100% happy with including content like “Step 1” via CSS.
What happens when screen reader comes to site? They have to remember what stage they are on. Not great.
However, I’m liking the tut and it’s nice to be reminded of what the new form 2.0 stuff can do (saw Bruce Lawson give a great demo at FOWD).
03/12/2009
That’s one good looking form but I’ve got to be honest, the markup almost made me weep.
Is this what we’ve got to look forward to with html5? Quoted attributes mixed with unquoted? Closed tags mixed with unclosed tags?
I’m with Daniel Lanigan, I’ll be sticking with the XHTML way of presenting markup, I find it far easier to read.
04/12/2009
I’m loving the placeholder element. Lately I’ve been using CSS3 gradients to make my buttons look like they’re being pushed. Really looking forward to HTML5 and CSS3.
04/12/2009
This is the perfect little Christmas gift I love getting from 24 Ways – a peak into what we will be doing in the not-too-distant future, and instructions on how to start using it in the coming year!
Thanks Yaili, great article!!
04/12/2009
Really interesting article, forms have never seemed so exciting. It looks like there are some pretty impressive features coming in HTML5 and CSS3.
04/12/2009
Yaili, brilliant article :)
I’ve used lists for forms a few times before – but there’s so much more in your breakdown – will have to go back to this and give it another go ~ thanks :)
04/12/2009
I agree with Simon Fernley I hope HTML5 does not force us to remove quotes and have properties with no values.
Lines like:
<input id=name name=name type=text placeholder=“First and last name” required autofocus>
I would rather they where more like:
<input id=“name” name=“name” type=“text” placeholder=“First and last name” required=“true” autofocus=“true”>
I think even HTML should be valid XML and should be strict.
Back to read more about HTML5 can check I can still use quotes on properties of HTML elements.
04/12/2009
All becomes clear:
http://robertnyman.com/2009/11/27/the-html5-syntax-options-problem/
HTML5 is worse for getting us all programming to the same strict standards.
But this article on forms is good, nice work! shame about some parts of HTML5.
04/12/2009
Awesome article. just enjoyed styling a form at work :)
04/12/2009
Nice work Yaili. Very useful writeup, but as usual leaves us all frustrated by the patchy browser support. For what its worth, Chrome supports “placeholder” too.
05/12/2009
It gives me a chill down my spine to see HTML attributes placed without “”. That’s about the only thing I’ll miss in HTML5, XML scheme is not necessary.
05/12/2009
The placeholder is an especially useful feature
09/12/2009
Great write up Yaili, This is the first time I’ve seen counter being used. Thanks!
15/12/2009
Hi,
First of all, thanks for this great article :)
I was trying to do the same thing and my counter won’t work, I don’t understand why…
It works fine in Opera, but it won’t work in Firefox. Well, what I did won’t work, yours does.
I get “Step 1” for every legend on Firefox 3.5.5 with what I did.
If anyone could point out what I did wrong, I would be greatly appreciated :)
You can find my work here : http://thordalis.free.fr/24Ways/
Thanks in advance !
17/12/2009
@Francois: Just add “counter-reset: fieldsets;” to the body tag on your CSS, so it will look like this:
body { background: #ffffff; color: #111111; font-family: Georgia, “Times New Roman”, Times, serif; padding: 20px; counter-reset: fieldsets;
}
26/12/2009
Keep in mind that placeholder makes a bad pair with autofocus.
The placeholder text would only possibly shown when you focus some-where else – but at that point you probably have filled out the input and consequently will never know about the extra-infos provided by the placeholder text.
08/01/2010
Heres an article from dive into html 5 on forms that nicely complements this one:
http://diveintohtml5.org/forms.html
21/02/2010
Terrific way semantically ordering the steps. Slightly thrown off by removing quotes, but after marking up a few html5 forms I’m already used to it.
18/03/2010
This is a really nice looking form. I like the new attributes in HTML5. It’s going to make a lot of things a whole lot easier.
07/12/2010
You can add HTML5 form validation support in all major browsers using h5Validate and jQuery. Just use the required and pattern attributes from HTML5 and add one line of JavaScript to your code, and you’re in business.
17/12/2010
Love it, especially the use of the counter for the Steps! For someone who hasn’t looked at HTML5 yet (!), this really motivates me.
Like the placholder attributes (although Safari is the only one to display it) and the number field type (altough Opera adds scroll arrows to change the numbers.
Great work Yaili :)Commenting is closed for this article.