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.

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.

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

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

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

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.

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?

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?

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.

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.

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

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

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

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.

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.

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.

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…

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.