928-224-2889 Contact

Flagstaff Web Design - HTML5 & Forms

HTML5 & Forms


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 if 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>
if (!("autofocus" in document.createElement("input"))) {
<input type="submit" value="Go">

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.

Paceholder Text With Fallback
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">

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
<input type="date">
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.

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
<input id="q" required>
<input type="submit" value="Search">

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">

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.

Jonathan VanWormer

Web Developer - Managing Director

Jon is a web designer in Flagstaff Arizona. He started with web design at the age of 17 where he created "Only the Best Apps" - a website where he would test and choose "Only 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.

Categories: Web Insights, Flagstaff Web Design
Posted On: Monday, 05 September 2011
Tagged In: Web Design, Website Development

Get Connected Stay Informed
Join more than 3,200 people who receive bi-weekly tips on search engine marketing and new and improved ways to help their small businesses succeed online.
Respecting Our Flagstaff Roots

In 2006 our founder and lead developer formed Flagstaff Web Architects to be one of the most innovative web design & development agencies in the area.

Although we have changed the name and expanded the business to reach throughout all of Arizona, Flagstaff is still at the heart of our business model and the owner still lives and breaths right here in this beautiful oasis.

Review Our Full History

Arizona Web Architects Designing & Developing the Net With LOVE for Over 20 Years Office (928) 224-2889 Emergency (928) 814-9049
Arizona Web Architects. Designing & Developing the Net With LOVE for Over 20 Years.
Office Line (928) 224-2889 Emergency (928) 814-9049

Arizona Web Architects

Designing & Developing the Net With
LOVE for Over 20 Years

Office Line (928) 224-2889
Emergency Line (928) 814-9049

Sitemap Privacy Terms

© 2006 - Present - Arizona Web Architects LLC