Treehouse: Grow your CSS skills. Land your dream job.

#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. I always enjoy screencast from here. HTML 5 is one of my target this year. (wakakakak, what a lately guy I am :D)

  4. Oh new video, i’m really happy! (:
    i learn valid html5 from this site:

  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.

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

  14. 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. That one was a really nice effort of yours .I wana learn more about those pop ups and Using Ajax with HTML5

  16. 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. Very nice and informative screencast

  19. 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. 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. Another good one from the CSS-Tricks

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

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

  25. 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 in triple backtick fences like this:

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