HTML5 Samples

Forms in HTML5 will be very simplistic. We’ve had limited features in old HTML: the text field, the checkbox, the radio button, the textarea and the select drop down. Any other data such as phone numbers, email addresses or dates had to be validated or checked by JavaScript or other scripts in server-side.

The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand.

New Types

Under the HTML5 umbrella, however, forms are getting a makeover. The new input types are:

• search
• tel
• url
• email
• datetime, date, month, week, time, and datetime-local
• number
• range
• color

In the example of an email field, validation could be performed by the browser, without JavaScript, to ensure that an email address was correctly entered. Even more powerful, it could allow autocomplete based on your local address book.

New Attributes

There are also plenty of new attributes, many designed to aid in constraining the limits of a field. Here is a small subset of new attributes:

• list — points to a datalist element containing value suggestions
• max and min — constrains valid date/time and number values
• pattern — allows a regular expression as a constraint
• placeholder — displays a text hint for the field

Fallback

If you try to use these new type now, browsers that don’t recognize the type will fall back to the text type. Unrecognized attributes will similarly be ignored. That means that you could start using it now and when browsers begin to recognize them, you’ll be ready. Client-side validation via JavaScript could be layered on in the meantime.

Where things are unclear is how you can tell whether the browser already supports these features. For example, inspecting the type in Firefox returns “text” but Safari and Chrome return “email“.

Browser Support

What’s most interesting is that we’re starting to see some of these features get implemented into browsers.

Mobile Safari (on the iPhone) was quick out of the gate by adding support for number, email and url. No validation is performed but special keyboards for each input type are presented to aid in entering a value.

HTML5 Form image

Most recently, Chrome 5 beta has support for the placeholder attribute.

HTML 5 Forms image

<label for="email">Email address</label> <input id="email" type="email" placeholder="jonathan@example.com">

What next?

I have qualms about how browsers will handle the complex input types like date and time and so I appreciate the slow and considered implementations to date. Yes, this isn’t very much just yet but it’s encouraging.

More about HTML5 Forms

Incoming search terms:

• html5 form example
• html5 radio button example
• forms html 5
• sample html5 forms
• html5 radiobutton sample
• html5 radio button sample
• html5 radio button checked
• html5 radio as button
• html5 forms with checkboxes
• HTML5 forms introduction