Getting users to fill in lots of forms can be frustrating so why not use speech to speed up the process? Google has recently implemented HTML 5 speech into its Chrome browser and other browser makers are set to follow.

Speech input

To add speech to an input field use the attribute "x-webkit-speech" as well as "speech" (the official attribute is "speech" but it hasn't been used yet) as shown below.

<input type="text" speech x-webkit-speech />

HTML 5 provides some new ways of validating user intput, which could save you a lot of time writing javascript code. This guide demonstrates how to do several standard validation checks using only HTML.

Presence check

A presence check is the simplest check to do. Adding the required attribute to a form element will stop the form from submitting until the element has been filled in.

<input type="text" required />

Format check

There are several ways to do a format check. HTML 5 provides some new input types that combined with the required attribute can be used to validate what the user inputs; the new input types are shown below.

<input type="email" required />

<input type="url" required />

<input type="date" required />

<input type="time" required />

<input type="datetime" required />

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

<input type="month" required />

<input type="week" required />

But what if there isn't a type for what you want to validate? There's a new pattern attribute that lets you validate using regular expressions. For example the code below could be used to validate country codes (US, UK, AU, etc).

<input type="text" required pattern="[A-Za-z]{2,3}" />

There's a lot more info on using and creating regular expressions at Regular-Expressions.info

A useful new feature of HTML 5 is the <datalist> element, which lets you add "autocomplete" suggestions to an input field when the user types into it.

Example

Data lists are very simple to use. First simply add the "list" attribute to an existing input field; this specifies which list you want to get data from.

<input type="text" list="listname" />

Next you need to create the actual list. It's made up of a <datalist> tag with nested option tags and has the general syntax as shown below. The <datalist> tag should have an "id" attribute that is the same as the "list" attribute on the input field. The <option> tags should have "value" attributes, which are the autocomplete results that appear when the user starts typing.