Skip to main content

HTML5 & Forms is Coding With Intelligence

It has been 12 long years since the core language of the world wide web is finally undergoing a huge revision with the release of HTML5. Although still in beta; HTML 5 has web designers and programmers alike squirming in their seats to get a hold of the new features it provides.
September 17, 2012

The features of HTML5 are aimed at providing a better user experience, support for multimedia like video embedding, and an easier time for the front and back end programmers. Since HTML4, the last markup format for this programming language, everyone on the Internet has been awaiting browsers to update to the latest revision to this core language. The thing is HTML5 is already well supported in all the major browsers like Mozilla Firefox, Google Chrome, Apple Safari, and even Internet Explorer 9 is on it’s way to support the new HTML5 revision. You may ask what the benefit of HTML5 is… well in two words – backwards compatibility – you can update your site now and when the browsers push it through completely, the design will come alive.

Upgrading to HTML5 is as easy as pie because – as I stated previously – it’s backwards compatible. In reality we have no reason to throw out HTML4 at all because of this. HTML5 is just a bunch of great features added to the core language that can be used by a supported browser. By just going through all of your websites and changing the doctype to <!DOCTYPE html> you now have a website that has an HTML5 compliance. The trick is to actually utilize the wonderful features that HTML5 has brought to the table and continually incorporate them into your future Flagstaff web designs.

Autofocus Fields

Currently the only way to autofocus fields in HTML4 is by using javascript to focus the first input field within a form. Once the web page loads, the page itself moves to the particular input field, sent by the javascript itself. The difference with this old tactic and the new HTML5 markup is that users that have disabilities can disable the attribute within the browser. Currently not all browsers support this feature, but browsers that don’t will just simply ignore it all together. To keep the browser support going then add the the autofocus attribute and detect if it is supported. If not then just disable the autofocus script all together.

Autofocus Code With Fallback
 <form name="f">
 <input id="q" autofocus>
 <script>
 if (!("autofocus" in document.createElement("input"))) {
 document.getElementById("q").focus();
 }
 </script>
 <input type="submit" value="Go">
 </form> 

Placeholder Text Code

What is a placeholder? A place holder is when text appears in the input field and once clicked within that field the input field itself disappears. You can offer the user hints as to what they are supposed to enter into the field. An example of this is, say you have a phone number, you can put (123)456-7890 as the place holder text and when they click the input box the phone number disappears.

Autofocus Code With Fallback
 <form>
 <input name="q" placeholder="Search Bookmarks and History">
 <input type="submit" value="Search">
 </form> 

Date Pickers

Next topic is date pickers. JavaScript frameworks have worked this into their libraries such as jQuery UI, YIU, but it still comes as an annoyance 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 is one of the only browsers to support this function, but as the others you can still pull a fall back script if it is not supported.

Date Picker Code With Fallback
 <form>
 <input type="date">
 </form>
 ...
 <script>
 var i = document.createElement("input");
 i.setAttribute("type", "date");
 if (i.type == "text") {
 // No native date picker support :(
 // Use Dojo/jQueryUI/YUI/Closure to create one,
 // then dynamically replace that <input> element.
 }
 </script> 

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.

Required Field Code
 <form>
 <input id="q" required>
 <input type="submit" value="Search">
 </form> 

Form Validation

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

Code to Remove Form Validation
 <form novalidate>
 <input type="email" id="addr">
 <input type="submit" value="Subscribe">
 </form> 

A quick starters guide to the wonderful new options HTML5 brings to the table. If you can take anything away from this article remember that new is better and that HTML5 brings less code which in turn means less bandwidth use and money saved.



Written By • Jon D

Web Developer / Managing Director
Jon is a website designer in Flagstaff Arizona. He started with web design at the age of 17 where he created a website where he would test and choose the best software from around the internet. It was all hand coded with Homesite – at that time the best (in his humble opinion) HTML editor around. He believes in local economy, open source technology, and helps bring the best the internet has to offer to his clientelle.

Everything ‘By Design’

“Wisdom is knowing what to do next, skill is knowing how to do it, and virtue is doing it.
– David Starr

Innovate & Illuminate Online!

Join our newsletter to discover the latest trends, tips, and technologies in website design and development, ensuring your online presence remains top notch.