Quick Tip: New HTML5 Form Features
Tutorial Details
- Topic: HTML5 Forms
- Difficulty: Easy
- Estimated Completion Time: 4 Minute Video
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.
Thanks for watching!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Grant Derderian
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.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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…
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
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!
Nice tips!
However, I find it odd that you used an XHTML 1.0 Strict Doctype while demo-ing HTML 5 features…
Haha. I thought that too. :)
…and then didn’t use an attribute/value for autofocus :)
Nice little video though. Thanks.
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!
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”
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 ;)
If that was posible don’t you think IE would exist now! :) There is no designer who doesn’t hate it
You didn’t close your head tag either ;)
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??
Agreed!
Hi! I am form Turkey. I can’t watch this video, because Turkish Government banned youtube’s ip. Please upload another video services.
I like this in HTML5:
But now you have to use javascript
Thanks for sharing
ups, the comment system doesn’t allow html
<input type="password" name="firstname" placeholder="john" />
is it me or the video no longer plays?
Works fine for me.
It works for me, no problem
Where do you get the iPhone emulator?? That would be really handy!
Nice tut, greatly appreciated.
It’s part of the free iPhone SDK (Mac only) available here: http://bit.ly/2aLHwL
Thanks for the feedback as well!
It’s comes with Xcode.
Thanks, didn’t know that.
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
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?
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.
Where’s the textual representation of this quick tip? JEFFR-
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?
Nice tips, but you forgot to say that the “url” input will only submit if the value match the regular URLs pattern (http:// etc)
Please upload to Screenr
What about the Date type?
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 ;)
Good!!! Quick tip and Good for save time.
Nice tips but you should be using and quotes for attributes that don’t necessarily need them, like autofocus=”autofocus”
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.
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?
They all degrade nicely to text inputs.
Excellent tut. Thanks!
Very nice. I wish those features were supported in all browsers.
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.
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.
Any thoughts on time line to complete HTML5 spec? Plus or minus 25 years.
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…
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?
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.
Amazing quick tip as usual! I’m starting to like these as much as / more than the actual tutorials. Keep it up!
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.
Seems like the admins haven’t seen my comment. :(
Really amazing quick tips …. as this will help me to take a step forward to HTML 5 ….
Thanks
Thanks very very nice
thanks very nice :D share
Good information.tahnks
This is a excellent website, will you be involved in doing an interview regarding how you designed it? If so e-mail me!
thank you for reel forever
Thank you for writing was a beautiful illuminated