Some New and Useful HTML5 Features

HTML5 has some great form features that designers will appreciated. They allow you to add both functionality and flair to your web pages.

Auto Focus

More and more, users are turning off JavaScript in an effort to enjoy safer surfing, and you really can't blame them. A lot of web forms, particularly search pages, use JavaScript to auto focus the user into the most important field on the site. In HTML5, you'll be able to handle this right through the markup, so you don't have to worry about JavaScript being disabled:

<form>
    <input name = "x" autofocus>
    <input type = "submit" value = "x">
</form>

That's all there is to it! There are no browser errors to worry about; if they don't handle this tag, they just ignore it altogether.

New Fields

There are 13 new field types that have been added in HTML5. They include some of the most common fields that have traditionally been handled as text. With HTML5, you'll get the following field types, among others:

  • number for phone numbers
  • tel for telephone numbers
  • emial for email addresses
  • url for URLs

This is just the tip of the iceberg. HTML5 has made forms much more powerful than they were in the past.

Placeholder Text

Placeholder text is a great way to make sure that people put the right information in the right boxes. This text shows up in the field until it is filled out or until the user actually focuses on the form field. If the browser doesn't support it, the text simply doesn't show up at all, eliminating the potential for errors.

The placeholder element shows up just after the field type:

<input name = "x" placeholder = "Your text right here">

HTML5 goes much further than this, and there is plenty to explore in this new version of markup.