Quick Tip: New HTML5 Form Features
videos

Quick Tip: New HTML5 Form Features

on Jun 17th 2010 with 56 comments
Tutorial Details
  • Difficulty: Beginners
  • Completion Time: 5 Minutes
Download Source Files
This entry is part 3 of 14 in the HTML5 and You Session
« PreviousNext »

In this screencast, we’ll take a quick look at a few new HTML5 features: the placeholder and autofocus tools, as well as the email and URL input types.


Subscribe to our YouTube page to watch all of the video tutorials!

Thanks for watching!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm Grant, a student by day and developer by night who loves to tinker with new features of the web- I find myself staying up working on my web experiments later and later every night and always love to keep up to date in the web design and gadget industries.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.scottcorgan.com Scott Corgan

    If HTML5 would have been supported 10 years ago, we just have finally acheived a part of the greatest of the potential of the web…

  • Gavin

    Really great screencast and tips!

    You demonstrated the email input there, and the warning that popped up.

    Is that error/warning message editable/set using the css? whats the field for that?
    Thanks

    • Grant Derderian
      Author

      I don’t think it’s editable using CSS because it’s generated directly by the browser. But, there are some JS UI libraries which enable you to add custom errors and styling: http://bit.ly/bBhBSj

      Thanks for the feedback!

  • http://twitter.com/aziz_light Aziz Light

    Nice tips!

    However, I find it odd that you used an XHTML 1.0 Strict Doctype while demo-ing HTML 5 features…

    • http://www.jeffrey-way.com Jeffrey Way

      Haha. I thought that too. :)

    • http://www.freshclickmedia.com Shane

      …and then didn’t use an attribute/value for autofocus :)

      Nice little video though. Thanks.

    • Grant Derderian
      Author

      I probably wasn’t looking when I setup the doctype in Coda- thanks for catching that :)

      Also, the autofocus declaration doesn’t require any value. It just sits there in the form tag.

      Thanks again for the feedback!

      • Brian

        Right – the autofocus declaration doesn’t require a value but xhtml requires name/value for attributes. In your case you don’t have valid markup. Proper markup for xhtml would be autofocus=”autofocus”

    • michael

      i’m pretty sure, this was to test us all ;)
      thx for this small preview, some features are really cool, sad that it is such a long way to html5..

      unless someone will blow up internet explorer ;)

      let’s start collect money and pay microsoft to remove the IE ;)

      • http://www.ex3m.bg/ Спортни стоки и екипировка

        If that was posible don’t you think IE would exist now! :) There is no designer who doesn’t hate it

    • http://www.antonagestam.se/ Anton Agestam

      You didn’t close your head tag either ;)

    • http://www.vinayvidyasagar.com/ Vinay Vidyasagar

      Hahaha, I noticed that too! I was just about to ask =) I want to know the answer too on whether those tooltips are editable using CSS??

  • http://www.johnwooten.info drumkeyjw

    Agreed!

  • http://www.iyinet.com trgy

    Hi! I am form Turkey. I can’t watch this video, because Turkish Government banned youtube’s ip. Please upload another video services.

  • http://www.monitojoomla.com MonitoJoomla

    I like this in HTML5:

    But now you have to use javascript

    Thanks for sharing

  • http://www.monitojoomla.com MonitoJoomla

    ups, the comment system doesn’t allow html

    <input type="password" name="firstname" placeholder="john" />

  • http://www.onyxsolution.com OnYx

    is it me or the video no longer plays?

    • Wael

      Works fine for me.

    • http://www.cashbackprinting.com CP Printing

      It works for me, no problem

  • http://twitter.com/Digital_Misfit Digital_Misfit

    Where do you get the iPhone emulator?? That would be really handy!

    Nice tut, greatly appreciated.

    • Grant Derderian
      Author

      It’s part of the free iPhone SDK (Mac only) available here: http://bit.ly/2aLHwL

      Thanks for the feedback as well!

    • http://envexlabs.com Matt Vickers

      It’s comes with Xcode.

      • http://twitter.com/Digital_Misfit Digital_Misfit

        Thanks, didn’t know that.

  • http://wedesignapps.com Christopher Chance

    Very neat HTML5 tip. Amazing what you can do with these new features once all browsers support it. Does Android OS recognize the email field like the iPhone OS – just curious

  • http://taylorhutchison.com Taylor Hutchison

    From what I can tell autofocus appears to be a boolean so one would assume that the proper way to use it would be to assign a value of “true” just like other boolean attributes. However it does not seem to respond to ‘true’ or ‘false’. Rather it applies focus to the last element on the page with the autofocus attribute. This is logical because only one element can have focus at a time, but it seems to go against the HTML way of doing things. Anyone have more information?

    • http://danharper.me Dan Harper

      I’m 99% sure if you want to use a field=”value” style syntax you use: autofocus=”autofocus” – the same way you would check a checkbox with checked=”checked”.

      But in HTML5 it’s just putting “autofocus” as Grant did in the video is perfectly standard mark-up.

  • A reader

    Where’s the textual representation of this quick tip? JEFFR-

  • http://johnpetrello.com John

    I think if you had to use a value for the “autofocus” attribute, it would also be autofocus. If you remember how to have something preselected in a select list, its just selected=”selected.” I would assume the same applies here?

  • Kineri

    Nice tips, but you forgot to say that the “url” input will only submit if the value match the regular URLs pattern (http:// etc)

  • Angry

    Please upload to Screenr

  • http://tutorial-city.net/ Tutorial City

    What about the Date type?

    • Grant Derderian
      Author

      That was in the original draft for the screencast, although there wasn’t enough time left to stick that in (Screenr has a five minute time limit) . Maybe next time ;)

  • Jose Perales

    Good!!! Quick tip and Good for save time.

  • http://www.myunv.com/ Sunny Singh

    Nice tips but you should be using and quotes for attributes that don’t necessarily need them, like autofocus=”autofocus”

    • http://www.freshclickmedia.com Shane

      This is valid HTML5, as are upper case tags and so on. Personally, I’ll continue to use a stricter markup style, but this more ‘relaxed’ style is perfectly valid.

  • http://www.rorybernstein.com Rory

    What happens with the URL and Email fields in browsers that don’t support HTML5? How do those older browsers handle these new input types?

    • http://wyome.com John Cox

      They all degrade nicely to text inputs.

  • http://www.disenews.com Martin

    Excellent tut. Thanks!

  • http://connorcrosby.me Connor Crosby

    Very nice. I wish those features were supported in all browsers.

    • http://twitter.com/Digital_Misfit Digital_Misfit

      Give it time. How long have we been wishing for the death of IE6? Now, it’s nearly dead! It is our job as designers and developers to really push the new technology and create a demand for browsers to use it.

  • http://www.illogicdesign.com Seth Etter

    Good information, very useful. I like that HTML5 is implementing a lot of small and simple features that greatly increase the way these tags are used.

  • http://www.jordanwalker.net Jordan Walker

    Any thoughts on time line to complete HTML5 spec? Plus or minus 25 years.

  • http://jacobdubail.com Jacob Dubail

    Great tip. Thanks. Can’t wait to see more browsers adopt more of these features. Too bad we can’t force our audience to upgrade…

  • Andy

    When submitting the incorrect email in the form in Opera, since Opera is handling the error, what happens if you come to the page with a different browser? Does it allow the form to submit with an incorrect email? Do all browsers that support HTML5 handle this the same? If they don’t what happens when the page is visited by a browser that doesn’t support HTML5?

    Is it going to be a good idea to rely on the browser to validate our forms?

  • Thomas

    I think it’s never a good idea to trust the browser with validating anything, javascript or the new HTML5 features. Javascript can be deactivated and HTML can be changed by the browser and especially with plugins like firebug.
    Validation in the browser is good for user comfort but not reliable.
    About browsers that don’t support HTML5: All inputs with a not recognized type will become text fields.

    I think I’ll be using these features but I think there should be a standard on how the error message is displayed and an easy way to change it.

  • http://www.mcmillangraphics.com Michael McMillan

    Amazing quick tip as usual! I’m starting to like these as much as / more than the actual tutorials. Keep it up!

  • Evin

    Hi Envato,

    Recently I have started to see video posts rather than normal text posts. But this is not good for users who have a limited bandwidth internet connection or for some one who have slow internet.

    Envato has been pioneering in helping web developers and designers to get latest and updated news and tutorials etc and I have been a keen visitor to your sites for years.

    Now the video posts have started to annoy me by taking away my monthly bandwidth.

    I hope Envato will understand this issue and find a way out for this.

    Thanks.

    • Evin

      Seems like the admins haven’t seen my comment. :(

  • Arnab

    Really amazing quick tips …. as this will help me to take a step forward to HTML 5 ….

    Thanks

  • http://www.teknolojiforumu.net webmaster forumu

    Thanks very very nice

  • http://www.burhanbasaran.com burhan

    thanks very nice :D share

  • http://www.deko.web.tr Dekoset Banyo Dolabı

    Good information.tahnks

  • http://www.bitcsounds.com Essex

    This is a excellent website, will you be involved in doing an interview regarding how you designed it? If so e-mail me!

  • http://www.4nc.net/ site ekle

    thank you for reel forever

  • http://www.boyaustasi.net boyaci ustasi

    Thank you for writing was a beautiful illuminated

  • bilbil

    Thanks mclovin