Quick tips to progressively enhance your HTML forms

Here are some useful ways to quickly add progressive enhancements to your HTML forms that will make them just that bit better for the end user using new HTML5 techniques.

Placeholder text

The placeholder attribute shows text (by default light grey) in a field. When the field is focused on it then hides the text. This can be used on Inputs or Textareas. Up until now most developers have had to use Javascript for this purpose, it is now supported by default in the latest versions of Chrome, Safari and Firefox.

<input id="name" type="text" name="name" placeholder="Your Name" />

New Field types

What are Field types? Well, you are probably already familiar with type="text" and type="password". The HTML5 spec has now defined 7 new field types. These include types such as ‘email’, ‘address’, ‘range’, ’search’ and many more.

<input id="email" name="userEmail" />

<input type="number" name="score" min="1"  max="15" />


What these offer the developer and end user is a wide variety of input types that in all modern browsers will allow a variety of ways of entering data. For example on an iPhone when a user interacts with an input specified as ‘email’ instead of getting the ordinary keyboard, they will get a keyboard that has the @ symbol and .com in easy reach. The great thing about these is that whilst they are not fully supported, they have absolutely no problems gracefully degrading back to the standard ‘text’.

You can read up more about these at W3 Schools for a comprehensive rundown of the features.

Give a Field focus on page load

There is also the option to specify a field to automatically get focus when the page is loaded. Much like Google.com does when you go to search. This means that the user can start entering the value without needing to first set the focus to that field.

This is a very simple one to acheive and is supported through the autofocus attribute as shown in the example below.

<input name="search" type="text" autofocus />

Other form tips
Remove the Textarea resize handle

Webkit browsers (Chrome and Safari) add a little resize widget to the bottom corner of your text areas that allow users to drag and resize the text area. If for whatever reason you want to disable that, a bit of CSS will do the trick.

textarea{
 resize: none;
}

Remove default Internet Explorer Scrollbars

Internext explorer, will by default, add a vertical scrollbar to your text areas. This can be removed and only allow to return when the content is too large by adding the following CSS.

textarea{  
 overflow: auto;
}