#99: Overview of HTML5 Forms Types, Attributes, and Elements

HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it works, great, the form is better, if not, whatever. In this screencast we look at all the new types, attributes, and elements and finish up looking at real world forms and how they could be better if they used these HTML5 features.

Links from the video:


  1. Chris
    Permalink to comment#

    Another great screencast Chris, my favorite part of it i guess was when the <output> field didn’t work. Never before have i heard such passionate frustration against HTML =)

  2. Matogel
    Permalink to comment#

    Very nice, HTML5 has great features :)
    I think I gonna use some of them in future, thanks for it.
    But well…some of the new features I don’t quite understand what advantages they should bring with them, mainly some of the form* parameters for submit buttons.

  3. riesurya
    Permalink to comment#

    I always enjoy screencast from here. HTML 5 is one of my target this year. (wakakakak, what a lately guy I am :D)

  4. rudywaltz
    Permalink to comment#

    Oh new video, i’m really happy! (:
    i learn valid html5 from this site: http://diveintohtml5.org/

  5. Ian
    Permalink to comment#

    Hey, I love your screen casts. I was wondering if you’ve considered having your videos hosted with Vimeo or YouTube? You have some really great information, but for some reason the videos take forever to download and stream.

    • Ian
      Permalink to comment#

      I’d like to edit my comment a little, to say that the older videos seem to stream very quickly. But they also seem to be in a different video format.

    • John
      Permalink to comment#

      I agree. These new format videos take forever to stream. I’ve been waiting 10 minutes. I’d download if you had a non mac format

    • John
      Permalink to comment#

      Update to previous quote. Problem is with FF on Win7. Chrome downloads right away.

    • Chris Coyier
      Permalink to comment#




      Both cross platform, both will have no problems with the downloaded version. And free. I know watching on the web kinda sucks.

  6. Mkhululi
    Permalink to comment#

    Thanks Chris.

    Maybe this will finally motivate me to sit down and read on HTML 5…


  7. Bert de Vries
    Permalink to comment#

    Nice. Can’t wait for number 100.

  8. Uwe Chardon
    Permalink to comment#

    Great screencast – I like HTML5

  9. Waterman
    Permalink to comment#

    you really have very cool stuff to give, but t will be nice if you provided a torrent file to your video tuts for those of us the the world of slow connections to be able to download too… thank you… Big fan

  10. Andreas

    It is cool but I don’t like the error-boxes at all. Maybe they will fit to some sites but not in general.
    And i don’t like that scrolling changes value on some inputs because if i scroll the page and my mouse gets over this input it starts to change the value.

    And please don’t forget to do server-side validation people.

  11. Thomas Jay

    Hey Chris. I just wanted to drop you a line and let you know how totally cool you are.

    I found your videos recently and have watched almost all of them (and a few of them multiple times). You have a really nice, easy teaching style. I actually enjoy when you make a mistake here and there and get to see how you trouble-shoot it. I feel like I’ve really become a better designer/developer because of the things I’ve picked-up here.

    Also, I picked-up your WP3 book and it’s awesome as well.

    Keep up the great work. The time and energy you put into all of this teaching is really appreciated by myself and I’m sure a lot of the web community.

  12. me

    Thanks for the screencast.

    In terms of progressive enhancement, it’d be really cool if you could cover this is a little more (apologies if you have and I’ve missed it). If you currently have e.g. an input type=”text” with an email validation script, and then upgrade your doctype and the type attribute to “email”… you’re going to get validation x2 in newer browsers?

    Should I use the novalidate attribute until *all* browsers fully implement the validation on input types I’m using? (At which point get rid of my JavaScript)

    Or am I totally confused?!

    Keep up the good work!

  13. Wouter J

    HTML5 is very great. The new things by forms are really good!

    The color type are comming soon in Chrome: http://www.youtube.com/watch?v=IPwCH8WQ8Qo

  14. Julian

    Excellent screencast Criss. I can see some of these form features being put to use on client sites in a year when there’s more uniform browser support (excluding IE of course, they’re always behind).

  15. Ahmad Awais
    Permalink to comment#

    That one was a really nice effort of yours .I wana learn more about those pop ups and Using Ajax with HTML5

  16. Dejan: Izdelava spletne strani
    Permalink to comment#

    Thank you for these awesome tips! You really help us all with continuous our work!

  17. Anja
    Permalink to comment#

    Video not working…. when you hit play it just idles and idles, refreshing browser doesn’t help either…

  18. Raj Kumar Mishra
    Permalink to comment#

    Very nice and informative screencast

  19. Mike
    Permalink to comment#

    Great screencast, I’m not sure if it is particularly useful in the real world, but still fun nonetheless.

    By the way I was curious and looked it up and the monkey is called George, the lizard is called Lizzie and the Werewolfe is called Ralph.

  20. Anna Green (web design Brisbane)
    Permalink to comment#

    I can’t wait to watch this! Hopefully it will put everything in perspective for me! Iv already doe some research but is all going over my head a little. Thanks for sharing the knowledge!

  21. dj
    Permalink to comment#

    Sorry… for two days now the tut doesn’t stream for me. FF 1.8 in Win 7

    • dj
      Permalink to comment#

      A bit more info … your Screencast 98 streams fine BUT this one (99) doesn’t stream at all (- the router lights don’t even flicker) and hasn’t for me since you posted it – at first, I just thought that your server was busy or something; but doubt that’s still the case.

  22. Kadikoi graphiste
    Permalink to comment#

    Great !!

  23. Kwame Anim
    Permalink to comment#

    Another good one from the CSS-Tricks

  24. Dave Black
    Permalink to comment#

    Fantastic screencast- I was falling behind but I’m now polished up nice and shiny! Cheers.

  25. Otoscope
    Permalink to comment#

    I was wondering what O.S. you are using and I just found out what it was. Ubuntu version. anyways, I am thinking of doing some web design over this 2 weeks and I am planning to use 2 columns for blogger. do you think 2 column is much better than a 3 column template, considering that it is only a new site.

  26. bluroon

    i’m really happy that I found this site,,, :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.