<html lang="en"> <head> <meta charset="utf-8" /> <title>E-mail / URL Input Fields Demonstrated</title> </head> <body> <header> <h1>E-mail / URL Input Fields Demonstrated</h1> </header> <form> <p><strong>E-mail Address</strong></p> <input name="email" type="email"> <p><strong>Web URL</strong></p> <input name="url" type="url"> <p><input name="Submit" type="submit"></p> </form> </body> </html>
In the HTML above, the
input element is used with respective type attributes of email and url. This type can be used by HTML5-compliant browsers to prevent the field from being submitted if the text entered in the respective input fields does not match the format expected for the specified type. Of the major web browsers (not including beta versions), Opera 11 is the only one that enforces these typings. Screen snapshots from Opera 11 are shown next.
The dialogs indicating bad formatting of the e-mail address and URL fields do not appear until the user clicks the button to submit the form. Opera 11 does not allow the form to be submitted and instead shows the errors as indicated. Other browsers do not currently indicate the error, though some of them do prohibit a form from being submitted when the format is incorrect.
Some of the major web browsers do take advantage of the "email" and "url" types of input fields to identify text previously input for that type of field. For example, a list of e-mail addresses or previous URLs might be provided for an
input element with the appropriate type.HTML5 form field validation also works with numeric input types and with the "required" specification. Suppose we enhanced the above HTML to add an input field with "required" and another input field of type "number" with "min" and "max" specifications. That enhanced example is shown next.
<html lang="en"> <head> <meta charset="utf-8" /> <title>E-mail / URL Input Fields Demonstrated</title> </head> <body> <header> <h1>E-mail / URL Input Fields Demonstrated</h1> </header> <form> <p><strong>E-mail Address</strong></p> <input name="email" type="email"> <p><strong>Web URL</strong></p> <input name="url" type="url"> <p><strong>Required Field</strong></p> <input name="required" type="text" required> <p><strong>Out of Range Numeric</strong></p> <input name="outofrange" type="number" min="0" max="10"> <p><input name="Submit" type="submit"></p> </form> </body> </html>
Screen snapshots of Opera 11's enforcement of "required" and of Opera 11's enforcement of a numeric input being within the provided range are shown next.
Custom format field validation is also supported via the
pattern attribute on the input element. See HTML5 Recipes: Form Validation for an example of this.Conclusion
As the screen snapshots in this post have shown, Opera 11 does a nice job of enforcing HTML5 form field validation for types of input ("email"/"url"), for presence of "required" fields, and for ranges of numeric inputs. I look forward to the day when all major browsers will fully support forms field validation in non-beta versions so that we can reduce the amount of JavaScript required for form validation. Because these are HTML tags, it doesn't matter whether the user has JavaScript enabled and it means simpler, more readable code.
No comments:
Post a Comment