In this post I will walk you through the process of creating a modern and compatible web form. Let's get started!

The basic form

As example I've choosen a registration form but the priniple will work for many forms. First of we need to decide which information are needed in the registration process. I can think of:

• EMail address
• Password
• Password confirmation
• Birthday
• Homepage

Of course the real world may need additional fields but for the sake of simplicity we start of using this five fields. You can design this form real quick by using only the input types text and password. The code would look like this (simplified):

<form> EMail: <input type="text"/><br/> Password: <input type="password"/><br/> Confirm: <input type="password"/><br/> Birthday: <input type="text"/><br/> Homepage: <input type="text"/><br/> <input type="submit" value="Register"/> </form>

And the form would look something like this (click the image for a live example).


We can identify two additional changes we need to make to ensure that this form does work correctly:

• We need to verify the form data (using JavaScript or server-side code)
• We need to parse the birthday field somehow

We could create all this features using JavaScript, jQuery or some other technology. But there is need because HTMl 5 solves many of this problems!

Side note:Let's leave the cross-browser compatibility issues aside for now.

Adding some HTML 5

Let's try to solve all the above problems using HTML 5. First of we should use the proper input type where possible. Adding the input types email, date and url the code will look like this:

<form> EMail: <input type="email"/><br/> Password: <input type="password"/><br/> Confirm: <input type="password"/><br/> Birthday: <input type="date"/><br/> Homepage: <input type="url"/><br/> <input type="submit" value="Register"/> </form>

Now the browser will validate the different fields for correct values. For example the browser will automatically notify the user (using his language) if the email address does not seem to be valid:



Next we will mark the email, password and password confirmation as required fields. The user may choose not to enter birthday and homepage though. We can use the HTML 5 attribute required to get this working:

<form> EMail: <input type="email" required/><br/> Password: <input type="password" required/><br/> Confirm: <input type="password" required/><br/> Birthday: <input type="date"/><br/> Homepage: <input type="url"/><br/> <input type="submit" value="Register"/> </form>

Again the browser will automatically validate these fields and displays a message to the user if one of the fields is missing:



Last but not least we can add some placeholder text the autofocus attribute to help the user fill out the form.

<form> EMail: <input type="email" required autofocus placeholder="Your email address"/><br/> Password: <input type="password" required/><br/> Confirm: <input type="password" required/><br/> Birthday: <input type="date"/><br/> Homepage: <input type="url" placeholder="Your homepage?"/><br/> <input class="orangebutton" type="submit" value="Register"/> </form>

The updated form now looks like this (click the image for a live example)

Adding a polyfill

This form works great using a modern browser like Chrome, Firefox or Internet Explorer 10. But in the back of my mind I can hear my clients complain that this will not work using IE 9. So let's take this to the other the next level and assume we need to fully support Internet Explorer 6.

Of course Internet Explorer 6 does not support any of the above features. At least it falls back to text input fields so a user could still use the form. But that's not good enough. We are going to add the webshims lib which will automatically emulate features which are not available in the users browser.

To use the webshims lib we need to include 3 JavaScript files and tell webshims which features it should emulate:

<script src="http://crossbrowserbook.com/Blog/scripts/jquery-1.8.2.min.js"></script> <script src="http://crossbrowserbook.com/Blog/scripts/modernizr-custom.js"></script> <script src="http://crossbrowserbook.com/Blog/scripts/webshim/polyfiller.js"></script> <script> $.webshims.polyfill('forms forms-ext'); </script>

And just like that the form works across all major browser including Internet Explorer 6. There is no need to make any changes to the actual code.
(click the image for a live example)

Conclusion and Download

In summery you can see that it's really easy to create modern and compatible web forms without the need to manually create scripts or write a huge amount of custom code. Surely you have noticed that the styling between the browsers and the polyfill differs, but webshims allows for easy styling using CSS if the need arises.

If you want you can download all files used in the case study here.

More workshops?

My new book The Cross Browser Handbook will include workshops on various scenarios like multimedia and web applications. Signup below to get notified when the book launches.