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

Comments

  1. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    rudywaltz
    Permalink to comment#

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

  5. User Avatar
    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.

    • User Avatar
      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.

    • User Avatar
      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

    • User Avatar
      John
      Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

      http://www.videolan.org/vlc/

      or

      http://www.apple.com/itunes/

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

  6. User Avatar
    Mkhululi
    Permalink to comment#

    Thanks Chris.

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

    M

  7. User Avatar
    Bert de Vries
    Permalink to comment#

    Nice. Can’t wait for number 100.
    Greetings

  8. User Avatar
    Uwe Chardon
    Permalink to comment#

    Great screencast – I like HTML5

  9. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    me

    Hi
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Dejan: Izdelava spletne strani
    Permalink to comment#

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

  17. User Avatar
    Anja
    Permalink to comment#

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

  18. User Avatar
    Raj Kumar Mishra
    Permalink to comment#

    Very nice and informative screencast

  19. User Avatar
    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. User Avatar
    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. User Avatar
    dj
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Kadikoi graphiste
    Permalink to comment#

    Great !!

  23. User Avatar
    Kwame Anim
    Permalink to comment#

    Another good one from the CSS-Tricks

  24. User Avatar
    Dave Black
    Permalink to comment#

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

  25. User Avatar
    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. User Avatar
    bluroon

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag