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!

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.

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.

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!

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?

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=”“.

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.

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

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.

Heres an article from dive into html 5 on forms that nicely complements this one:

http://diveintohtml5.org/forms.html

I had forgotten about the counter-increment and counter-reset properties. Thanks for the refresher.

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.

In your example, that does not work in Opera (not even in V10.10).

form#payment fieldset fieldset label:hover {
cursor: pointer;
}

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

That placeholder attribute is teh awes. Am I right in seeing that only Safari treats this attribute properly?

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.

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.

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

Brilliant Yaili – This was a great article on HTML5 forms!

Thanks
@seandelaney

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

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?

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

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

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.

Really interesting article, forms have never seemed so exciting. It looks like there are some pretty impressive features coming in HTML5 and CSS3.

A really nice article, I’m loving the new placeholder item.

Thanks!

thanks for making forms seem a little less scary that what they need to be… really liked the article.

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!

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

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

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?

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.

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.

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

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.

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…

form#payment fieldset fieldset label:hover {
cursor: pointer;
}

to…

form#payment fieldset fieldset label:hover,form#payment input[type=radio]:hover{
cursor: pointer;
}

which would provide a pointer for all radio buttons on the payment form.

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.

@Kean

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?

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.

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.

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

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>

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

Great writeup Yaili… and great markup! It’s nice to see forms done the right way and nicely styled at the same time.

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.

I have actually been enjoying styling forms, but this brings it to a whole other level! thank you so much! Great article.

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.

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.

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.

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

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.

Awesome article. just enjoyed styling a form at work :)

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.

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.

Great write up Yaili, This is the first time I’ve seen counter being used. Thanks!

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

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.

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.

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.

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 styling. Thank you!

What a great article Kudos Guys

excellent and helpful