HTML 5 Forms

HTML 5 is quickly gaining in popularity and is appearing more frequently across the web. While you may hear about the awesomeness of HTML5s new JavaScript and CSS features, the actual HTML improves are often missed. Lets look at the thirteen new form field types and some of the more useful new form field attributes.

Not all browsers support HTML 5 forms yet, and those that dont will render the new input types as text instead, and the new attributes probably wont work. For best results view this page in Safari or Chrome 4+.

Autofocus

Users find it helpful when they visit a form on your site, if the first field in the site is automatically given focus. Again most JavaScript frameworks implement autofocus in one way or another. However, in HTML 5 you can delegate it to the browsers, so that when the page refreshes, the first form field with the autofocus attribute is given focus:

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

Placeholder Text

It is often useful to the end-user if text field have placeholder text to give them more context about what should be entered. Usually, this text disappears when the focus is given to the field. Almost every JavaScript framework now has a tool for allowing you to implement placeholder text, but with HTML 5 placeholder text can be delegated to the browsers:



<form>
  <input name="q" placeholder="Search For a Name"/>
  <input type="submit" value="Search"/>
</form>

Form Validation

By default HTML 5 forms should validate your inputs, and not allow them to be submitted when incorrect. Currently Opera does a good job of this, but other browsers have shipped with an incomplete validation. Supposedly, FireFox 4 will implement validation for all types. However, if you need to turn validation off for some reason, add the novalidate attribute to your form:

<form novalidate>
  <input type="email"/>
  <input type="submit" value="Ok"/>
</form>

Require Fields

HTML 5 introduces the required input attribute which will prevent end-users from submitting a form, unless the required field has a value:




<form>
  <input type="email" required/>
  <input type="submit" value="Ok"/>
</form>

type="email"

The input field type email is basically the same as type text, but browsers may choose to handle it slightly differently, with a different style or validation. For example, the iPhone shows a slightly different keyboard for this input type:



<form>
  <input type="email"/>
  <input type="submit" value="Ok"/>
</form>

type="url"

Like the email type the uri is basically the same as type text, but the browser may choose to handle it slightly differently. Again the iPhone is a good example of this, showing a slightly different keyboard:

<form>
  <input type="url"/>
  <input type="submit" value="Ok"/>
</form>

type="search"

Like the email and url types the search is basically the same as type text, but the browser may choose to handle it slightly differently. Safari 4+ plus is a good example of this, showing a different style of input and putting an little x box to clear any values:

<form>
  <input type="search"/>
  <input type="submit" value="Search"/>
</form>

type="number"

The new number type shows a number field as a spinbox. You can specify a min/max, step, and default value:



<form>
	<input type="number"
		min="0"
		max="10"
		step="2"
		value="4"/>
</form>

One thing to watch out for when validating, is when the browser also renders an text field next to the spinner, then the user can manually enter invalid values, while the spinner will only generate the desired values.

Additionally, there are three new JavaScript functions available for this type of field:

elInput.stepUp(n); // a number to increase the value by
elInput.stepDown(n); // a number to decrease the value by
elInput.valueAsNumber(); // returns the value as a floating point number

type="range"

You may also choose to render numbers as a slider using the range type. Ranges have the same new attributes as the number type:



<form>
	<input type="range"
		min="0"
		max="10"
		step="2"
		value="4"/>
</form>

The only downside to the slider is there is not yet a way to render tick marks, so you should manually convey the slider value to the end-user in some way.

Date Pickers

The following input types all render some version of a date or time picker. Unfortunately, they currently only work in Opera. When they are well supported they will be a huge boon, as JavaScript framework based calendaring systems tend to be fairly page-heavy.

A date only picker:

<form>
	<input type="date"/>
</form>

A date and time picker:

<form>
	<input type="datetime"/>
</form>

A localized date and time picker:

<form>
	<input type="datetime-local"/>
</form>

A month and year picker:

<form>
	<input type="month"/>
</form>

A week picker:

<form>
	<input type="week"/>
</form>

A time only picker:

<form>
	<input type="time"/>
</form>

type="color"

The last new type is a color picker, which is not yet supported by any browsers. Many JavaScript frameworks implement this, and hopefully, well be able to delegate this to the browsers soon.

<form>
	<input type="color"/>
</form>