Have a Field Day with HTML5 Forms

73 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Stephan

    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.

  2. gaspar

    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

  3. ChrisB

    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

  4. Juarez P. A. Filho

    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.

  5. Ray Brown

    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.

  6. John Faulds

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

  7. Tom

    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!

  8. Andrew Yates

    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

  9. Cole Henley

    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?

  10. Yaili

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

  11. Daniel Lanigan

    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.

  12. BMBWD

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

  13. Alcides Fonseca

    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!

  14. Lee Munroe

    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!

  15. Peter

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

  16. simon r jones

    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?

  17. Kean

    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?

  18. Chris Mahon

    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.

  19. Michael Wilson

    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

  20. Ben Bodien

    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.

  21. Ben Bodien

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

  22. Vadim Makeev

    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.

  23. Fabrizio

    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

  24. Mark Stickley

    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>

  25. Ray Drainville

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

  26. zcorpan

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

  27. Iaax Page

    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.

  28. dougwig

    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.

  29. Thomas J Bradley

    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.

  30. Simon Fernley

    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.

  31. Josh

    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.

  32. Ben

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

  33. prisca

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

  34. hpoom

    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.

  35. hpoom

    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.

  36. Dave

    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.

  37. ephimetheus

    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.

  38. Yaili

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

  39. Nicolas

    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.

  40. Eric Leads

    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.

  41. Leo

    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 :)
  42. Ryan Seddon

    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.

  43. dale

    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!

  44. Alex Gibson

    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.

  45. Andy Whitlock

    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.

  46. Rich Clark

    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.

  47. Adam C

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

  48. David Smith

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

  49. Francois Cassin

    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 !

  50. Tony Krol

    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.

  51. Craig

    Thanks for this article. I usually loath forms, but you have provided a great template for me to refer back to again and again. Keep it up :)

Impress us

Be friendly / use Textile