HTML5 - Example Form validation and styling Form elements
bobleah 270000CN12 Comments (18) Visits (61896)
While the current web browser support matrix has not fully caught up with the promise of the HTML5 Form specification, we are seeing additional adoption of various HTML5 Form elements in some recent browser deployments. This post will cover a few basic Form elements and visual treatments, to demonstrate how simple and effective the new Form validators are going to be.
One welcomed improvement HTML5 brings to Forms is the placeholder attribute. You have likely encountered this treatment in Forms today, as the text displayed inside of empty input fields. When you click or tab to the
input field, the placeholder text is removed. Placeholder text allows us to provide a cleaner and more compact Form experience, and is especially useful for mobile applications, where physical space is at a premium.
Basic Form validation
Use the required attribute to indicate an input field must contain a value before form submission. This attribute works with the following <input> types: date, email, checkbox, file, number, password, radio, telephone, text, search, and url.
All browsers support input type email. However, be aware that older browsers may simply treat this field as plain text. One nice treatment of the email type is seen on smart phones, where the keyboard associated with this field elevates the "@" and "." key buttons to the same level as the space bar.
You can use the pattern attribute to specify a pattern to validate an input field. The pattern is a regular expression and this attribute works with the following <input> types: email, password, telephone, text, search, and url.
Rather than use the default visual treatment to indicate valid input data for each of these examples, I marked up some CSS to apply a background image for each input field. This technique allows me to control the visual feedback of the Form experience, instead of relying on the default browser Form experience, which can vary from one browser implementation to the next. I used a simple red "x" background image to indicate that the validation for each field has not completed successfully.
As each validator is run (per user keystroke) the CSS will style the appropriate state of the background image. When the validation has passed, the background image will update to a green "check". Additionally, I have base64 encoded my background images, rather than use a traditional web image resource. This does not have any impact on the users experience, but does allow for the CSS to completely contain the validation in a single file versus three web resources (CSS, and two images).
If you have one of the newer generation browsers from Firefox or Chrome, you can experience a working example by clicking here. You can also download the complete HTML example by clicking here. This post has just scratched the surface on what is coming in the way of HTML5 Form validation. For the complete specification on HTML5 web Form elements, refer to the W3C web Form working draft.