After 12 long years, the core language of the world wide web (HTML or Hyper Text Markup Language) is finally undergoing a major revision with the release of HTML5. Although the much anticipated version is still in beta, with no official launch date having been announced; HTML5 has web designers and programmers buzzing about its latest features.
According to the W3C, new HTML5 features are aimed at improving support for multimedia like video embedding, providing for a better user experience and an easier time for programmers. Although HTML4 has been a huge success, (some even argue the most successful markup format to ever have been released) everyone in the Internet world has been patiently waiting while browsers update with the latest major revision to the core language. As time wanes on, people are wondering, why the wait? The thing is, HTML5 is already well-supported in browsers like Safari, Chrome, FireFox, Opera, and mobile browsers. Even Internet Explorer 9 is set to support the new HTML5. The benefit of HTML5 is that it is backwards compatible – so, if your interested in updating your sites right now, you can. There are just a few browsers that are not fully compatible with HTML5 yet.
Upgrading to HTML5 is fairly easy because it works with HTML4. In fact there’s no reason to throw out HTML4 at all, because HTML 5 is simply a bunch of new cool features that were added to the HTML4 core language. Upgrading (if you want to call it that) to HTML5 is very simple. All you have to do is change your doctype to <!DOCTYPE html>. This new update helps keep things simple; while in HTML4 there were a range of different doc types that you could use, making it a little more tricky. You can go through right now and update all of your websites, they won’t break. All HTML4 tags are 100% supported by HTML5.
HTML5 defined over a dozen new input types and new features that you can use in your forms. The new additions to HTML5 are going to make developers lives much easier.
Place Holder Text
I think this is my favorite improvement in HTML5. All developers are used to using javascript and jQuery to do a placeholder text in an input field, but in HTML5 it makes it extremely easy for developers to display a placeholder. What’s a place holder? A place holder is when text appears in the input field and when you click on the input field it disappears. You can put hints of what the user is supposed to put in the field. As an example, if you have a phone number input box you can put (XXX) XXX-XXXX as the place holder and when they click, it will disappear. I’m sure you’ve seen this around.
|
IE |
FF |
Safari |
Chrome |
Opera |
iphone |
Android |
|
– |
3.7+ |
4+ |
4+ |
11+ |
4+ |
– |
AutoFocus Fields
The current way in HTML4 to do autofocus is using javascript to focus the first input field on a web form. As soon as a web page loads, the page will move the focus to the particular input field, just as the javascript does. What’s the difference? Since this is now in the HTML markup, users who have disabilities can easily disable this attribute within their browsers. Not all browsers support the autofocus feature, but the browsers that don’t will just simply ignore the attribute. If you want it to work in all browsers just add the new HTML5 autofocus attribute, then detect if the browser supports autofocus. If it does, don’t include the autofocus script, if it doesn’t then include the autofocus script.
|
IE |
FF |
Safari |
Chrome |
Opera |
iphone |
Android |
|
– |
4+ |
4+ |
3+ |
10+ |
– |
– |
HTML5 Defines 13 New Input Types.
Email Addresses
The first input field I will talk about is email addresses. Browsers that don’t support the new types will simply treat it as a text field. 99% of people won’t even notice the difference until they submit (this is when the form will validate). iPhone users will notice when they click in the email input box that an @ sign and a . will appear in a shorter easier keyboard. If you have an iPhone, you know what I’m talking about.
Web Addresses
The next input field we will look at is web addresses. If someone asks for a URL, they are expecting something such as https://www.blackrhinosolutions.com. So now input type URL again allows users that have an iPhone to have an altered virtual keyboard that will allow them to easily add periods, slashes, and .com to their string in their input box. Once again, most people will not even notice the difference until they click submit (when the form validates).
Number
Next topic is numbers. The most annoying of all the values to get is numbers. You have to do a lot of juery to make sure you validate this field. HTML5 adds type number. This includes a few extra attributes (all optional):
- Min: Specifies the minimum acceptable value for this particular input number field
- Max: You guessed it right, the maximum acceptable value for the number field
- Step: Starting at the min number it will than count by the number added in this attribute. The default is 1.
This will allow for only numbers (most again will not notice the difference until they try to click submit and they get an error because they typed in something other than what is allowed) and will only allow the numbers 0, 2, and 4.
Numbers as a Slider
I thought this was really cool. HTML 5 allows you to use a new type called range, which will turn the input field into a slider. This is cool for when you want to have slider controls in your web form. The mark up is the same as the number type, but just substitute type=”number” for type =”range”.
Date Pickers
By far the best addition is the date picker type called date and datetime (there are other additional date/time types such as time, week, month datetime-local as well). The javascript frameworks have worked this into their libraries such as jQuery UI, YIU, but it’s still annoying to just add a date picker. HTML5 defines a new native date picker control without having to include a script on the page. As of right now Opera is one of the only ones that fully supports this feature, but as the others you can do a fall back script if it’s not supported. Eventually all browsers will be up to date.
Search
HTML5 has added search as a type for input boxes. This is minor, but a cool change for some users. It simply puts rounded edges on the input box automatically and when you start to type it places a small X to the right. Not all browsers again support this.
Color
HTML5 also defined type color, which lets you pick a color and returns the hexademical value. Opera 11 is the only browser that supports this type. I don’t think most people use this type anyway, so I don’t think it’ll be a big deal.
Form Validation
Above we spoke about cool new input types like email, date, number, etc. One of the most exciting features of HTML5 is the addition of form validation. Most developers have either client side or server side script to validate a form (I do both!). As the HTML5 form validator may not be able to replace your server side validation, it sure can eventually replace your client side validation. The issue with javascript validation is that users can easily just disable javascript and get around it. Now with HTML5, you won’t have to worry about that. Below is an example from Chrome 12. All browsers and OS’s may render the error messages differently, but this is an example of what it may look like.
All errors are from HTML5, and no javascript was added.
|
IE |
FF |
Safari |
Chrome |
Opera |
Iphone |
Andriod |
|
– |
4+ |
5+ |
10+ |
9+ |
– |
– |
Required Fields
HTML5 form validation isn’t just limited to validating the types of fields. It also allows for a new additional markup called, required. This allows developers to verify that all the fields were filled in without having to use javascript.
Any developer knows that these updates are essential for development turnaround time and for enhanced user experience. Once all the browsers accept HTML5 the new updates to the mark up will make the new generation of websites exceed anyone’s expectations.
Well there you have it. A quick starting guide to the new updates you can find in HTML5. If you can take anything away from this article, remember that HTML5 is not something to be scared of. It’s something that will help developers and all your HTML 4 websites can be upgraded whenever you are ready!
But you still forgot, that there is a “button”-Element. Why not use that?
Thanks for this useful post, I’ll use all that stuff in my next form designs.
Thanks for this post! What happens when a IE user comes at a page with HTML5 forms?
I’m guessing the form is the same but there will not be any error handling unless there is some sort of detection of IE going on. Possibly using Modernizr.
The HTML 5 seems to be compatible with IE atleast it seems to be compatible with IE9 not sure about the older IE browsers
Love the new HTML5 forms, should make coding easier
Thanks! I think the datalist field should also be mentioned in this post. But great post anyway:}
IE and older not supporting Browsers ignore the extra attributes, and they’ll render elements as text input’s.
BTW, the popup required and aria-required=”true” can be styled as well.
Thanks for the great article. I would be seriously concerned with the performance of IE or lack of it, if using full html5 forms for a client. This is not the same as graceful degradation. If there are tech issues with form fill-outs (which are notoriously bad anyway) I would still err on the side of clunky but functional code.Nice to have dreams of the future though…
Hey Alexa –
Thanks so much this article was really helpful. I am looking forward to using HTML5 for my forms. When do you think it will be fully supported?
Hey anyone know of any site or book or tut that could help bring me up to speed on HTML5?
You can get “Introducing HTML5” (ISBN: 0321687299)
hi, mark please check https://html5tutorial.net/ or https://html5tutorial.info/ it’s free and useful 🙂
Not going to lie HTML 5 makes me really excited about the future of coding. Seems to have simplified everything that needed to be fixed before.
Nate
Thank you for the great article! Will be using in my designs.
looks pretty good what you show here. now I only have to find a way to fix the autoformatting from each browser: safari, Firefox are a pain!
Nice roundup of the input types. I have some private web apps that are itching to use them! The number and slider inputs are especially nice.
Thank you for this post, I really like the placeholder in HTML5 🙂
Thanks for this information didn’t know about the placeholder and form validation. Nice!