1. The 'required' attribute
The simplest change you can make to your forms is to mark a text input field as 'required':
Your Name: <input type="text" name="name" required>
This is where HTML5 really gets interesting and more useful. Along with the
text input type, there are now a host of other options, including
email,
url,
number,
tel,
date and many others.
On the iPhone/iPad the different input types are associated with different keyboards, making it easier for people to complete your online forms. In other web browsers they can be used in combination with the
required attribute to limit or give advice on allowable input values.
2. Different INPUT types
INPUT type="email"
By changing the input type to
email while also using the
required attribute, the browser can be used to validate (in a limited fashion) email addresses:
Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">
Note that for this example we've made use of another HTML5 attribute
placeholder which lets us display a prompt or instructions inside the field - something that previously had to be implemented using messy
onfocus and
onblur JavaScript events.
INPUT type="url"
In a similar fashion to the
email input type above, this one is designed to accept only properly-formatted URLs. Of course it currently does nothing of the kind, but later you will see how to improve it's behaviour using the
pattern attribute.
Website: <input type="url" name="website" required>
INPUT type="number" and type="range"
The
number and
range input types also accept parameters for
min,
max and
step. In most cases you can leave out
step as it defaults to 1.
Here you see an example including both a
number input, typically displayed as a 'roller' and a
rangeinput displayed as a 'slider'.
3. Other HTML5 INPUT types
Other valid HTML5 input types include:
- color
- date
- datetime
- datetime-local
- month
- search
- tel
- time
- week
The
search input will, in some browsers, change the styles to match the browser or operating system default search field format. You can see this demonstrated in the Search input above.
The
tel input type is handy for the iPhone as it selects a different input keyboard. There is no pattern-matching set by default so you would have to implement that yourself using the
patternattribute to accept only certain characters.
The
color input is meant to let you select a hex-code from a colour wheel - or similar - but as yet doesn't appear to have been implemented in the wild.
The other
date- and
time-related options do have an effect at least in Opera, with pop-up calendars and other devices appearing to assist with input. While it would be great to see something like this in every browser, for now you probably need to stick with the ubiquitous JavaScript plugins.
0 comments: