{"id":4472,"date":"2012-05-17T22:45:03","date_gmt":"2012-05-18T02:45:03","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=4472"},"modified":"2012-11-06T12:12:05","modified_gmt":"2012-11-06T16:12:05","slug":"cross-browser-styling-of-html5-forms-even-in-older-browsers","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/","title":{"rendered":"Cross Browser Styling of HTML5 Forms — Even In Older Browsers."},"content":{"rendered":"
\nNote:<\/strong> For an introduction to HTML5 Forms, you may want to also read my original post, Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms<\/a> which has been updated to reflect changes in the latest version of the html5Forms.js package, including the ones described in this article. I have also written about CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution<\/a>, which may be of interest if you need advanced styling of HTML5 Forms that the specification doesn’t handle.\n<\/div>\n

<\/a><\/p>\n

\n

Note:<\/strong> \"*\" denotes a required field.<\/p>\n

\n\n\n\n\n\n
Name: <\/th>\n<\/p>\n
<\/div>\n<\/td>\n<\/tr>\n
Phone: <\/th>\n<\/p>\n
<\/div>\n<\/td>\n<\/tr>\n
Email: <\/th>\n<\/p>\n
<\/div>\n<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n<\/table>\n<\/form>\n

An example HTML5 Form with validation. Interact with it, and you will see the form will detect when the user has put in valid information as he types. You will also note that if the form is submitted when some of the data is invalid, it will show friendly error messages.<\/p>\n<\/div>\n

HTML5 Forms<\/strong> is probably the most practical and, I believe, will be the most commonly used module of the HTML5 spec.<\/strong> With it, you can create great looking, easy-to-use forms<\/strong> that can validate each field as a user types.<\/strong> Try the example on the left to see how this validation works. Then try to submit the form when it contains errors — you will see a nice, friendly error message beneath your first mistake.<\/strong> Nice, isn’t it? Many of the modern browsers (i.e. Firefox 4.x+, Chrome 17+1<\/a><\/sup>, Opera 10.x+, IE 10+) support the HTML5 Forms spec natively, and it is possible to add support to the other browsers (Safari1<\/a><\/sup> and IE 9.0-) using HTML5Forms.js, the updated version of my HTML5Widgets package I published in 2010.<\/strong> It includes a modified build of Weston Ruter’s webforms2 that mimics the behavior of the newer native implementations of the HTML5 Forms specification. After you read this article, I would suggest first reading my initial blog post, Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets<\/a> (updated, of course, to be in sync with the new features of the new HTML5Forms.js package) so that you can become familiar with the other parts of the HTML5 Forms specification.<\/p>\n

Before Getting Started<\/h2>\n

You will need to download the HTML5Forms.js JavaScript library to add support for older browsers that don’t support HTML5 Forms natively. When you download the package, all you need to do is add the following tags to the head of your document:<\/p>\n

\n
\r\n <script type=\"text\/javascript\" \r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\">\r\n <\/script>\r\n\r\n <script type=\"text\/javascript\"\r\n          data-webforms2-support=\"validation\" \r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" > \r\n          \r\n <\/script>\r\n<\/pre>\n<\/blockquote>\n
HTML5Forms.js includes a custom build of Modernizr<\/a> that includes only the Form element detection routines.   If you want, you can include the full blown version of Modernizr or your own custom build of it instead, as long as it has HTML5 Forms support.  Note that the script<\/code> tag that includes html5Forms has a data-webforms2-support<\/code> attribute.<\/strong>   This is used to tell the script the parts of the specification that need to be supported.  If the browser doesn’t support that part of the spec, load the additional scripts needed to add support.  In this case, data-webforms2-support<\/code> is set to \"validation\"<\/code> which tells html5Forms to load webforms2 polyfill to add support for older browsers, which is included with HTML5Forms.js.  For more information about the other values that can be added to data-webforms2-support<\/code>, please read my previous article of HTML5Widgets.<\/p>\n
So… now that we got the polyfill out of the way, let’s see what HTMl5 Forms can do.<\/p>\n
Styling Validation Messages<\/h2>\n
Let’s say you have a form field that is supposed be used to input a North American Phone Number:<\/p>\n
\n
\r\n<input type=\"text\" name=\"phonenum\" value=\"\"  \/>\r\n<\/pre>\n<\/blockquote>\n
Now let’s say you want to validate the form element on the client side.  In HTML5, all you need to do is insert the following HTML into your <input><\/code> element:<\/p>\n
\n
\r\n<input type=\"tel\" name=\"phonenum\" value=\"\" \r\n          pattern=\"[0-9]{3}-?[0-9]{3}-?[0-9]{4}\"<\/span>\r\n          required placeholder=\"e.g. 416-769-7093\"<\/span> \/>\r\n<\/pre>\n<\/blockquote>\n
The required<\/code> attribute forces the user to fill out this form field.  The pattern<\/code> attribute ensures the form will be submitted when the text inside the form field matches the a North American phone number using the attribute’s regular expression (if you aren’t familar with regular expressions, take a look at Regex Tutorial<\/a>).  The placeholder<\/code> attribute is there to give the user an idea about how the data should be formatted (presented in English, since most people can’t resolve regular expressions inside their head.  My brother can, but then again, he really isn’t like most people).<\/p>\n
To see how this works in practice, try entering in valid and valid phone numbers into the form field below to see what happens when you try to submit:<\/p>\n\r\n\r\n\r\n\r\n\t\r\n\t\r\n
Phone Number :<\/th>\r\n\t\r\n\t<\/td>\r\n<\/tr>\r\n
Zip Code :<\/th>\r\n\t\r\n\t
<\/div>\r\n\t<\/td>\r\n<\/tr>\r\n
<\/td>\r\n\r\n\r\n<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/form>\r\n
See the nice and friendly “cartoon bubble” that appears when the phone number is not formatted correctly?  This is HTML5 Form Validation in action.  Pretty cool, but you will see the browsers don’t style them in exactly the same way:<\/p>\n\n\n\n\n\n\n\n\n\n\n
<\/th>\nWindows<\/th>\nMac<\/th>\nLinux<\/th>\n<\/tr>\n<\/thead>\n
Firefox 4.0+
(native support)<\/th>\n		\n\"Screenshot<\/td>\n\n\"Screenshot<\/td>\n\"Screenshot<\/td>\n<\/tr>\n
Safari 5.x- 
 (polyfill)<\/th>\n		\n\"Screenshot<\/td>\n\"Screenshot<\/td>\nNot Applicable<\/td>\n<\/tr>\n
Chrome 17+
(native support)<\/th>\n		\n\"Screenshot<\/td>\n\n\"Screenshot<\/td>\n\n\"Screenshot<\/td>\n<\/tr>\n
Opera
(native support)<\/th>\n		\n\"Screenshot<\/td>\n\n\"Screenshot<\/td>\n\n\"Screenshot<\/td>\n<\/tr>\n
IE8
 (polyfill)<\/th>\n		\n\"Screenshot<\/td>\nNot Applicable<\/td>\n<\/tr>\n
IE10
 (native support)<\/th>\n		\n\"Screenshot<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
I especially found it interesting that Firefox changes the look of the bubbles to match the underlying operating system.   I can imagine that the graphic-designers out there reading this will probably want to control the look and feel of these bubbles.   It is possible to change the native style in Chrome<\/strong> using some Webkit-only CSS pseudo-classes, but currently it doesn’t look like we can style them in the other browsers that natively support HTML5 Forms<\/strong> (i.e. Firefox, Opera and IE10).  While I’m sure that these browsers will allow CSS styling of the bubbles in the near future, you can do it now by forcing webforms2 to render the bubbles instead of the native browser routines<\/strong> by setting data-webforms2-force-js-validation=\"true\"<\/code> on the form<\/code> tag (and the script<\/code> tag that loads html5Forms.js<\/code>).  Here is the code:<\/p>\n\r\n
\r\n
\r\n<!DOCTYPE html>\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n\r\n  <script type=\"text\/javascript\" src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\">\r\n  <\/script>\r\n\r\n  <script data-webforms2-force-js-validation=\"true\"<\/span>\r\n          data-webforms2-support=\"validation\" \r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" \r\n          type=\"text\/javascript\">\r\n  <\/script>\r\n<\/head>\r\n\r\n<body>\r\n  <form data-webforms2-force-js-validation=\"true\"<\/span> \r\n           id=\"styleBubbleExample\"\r\n           name=\"styleBubbleExample\">\r\n    <table class=\"formTable\">\r\n      <tr>\r\n        <th>Full Name :<\/th>\r\n\r\n        <td><input type=\"text\" name=\"fullName\" value=\"\" required=\r\n        \"required\" placeholder=\"Required information\" \/><\/td>\r\n      <\/tr>\r\n\r\n      <tr>\r\n        <th>Company Name :<\/th>\r\n\r\n        <td><input type=\"text\" name=\"companyName\" required=\r\n        \"required\" value=\"\" placeholder=\r\n        \"Required information\" \/><\/td>\r\n      <\/tr>\r\n\r\n      <tr>\r\n        <td><\/td>\r\n\r\n        <td><input type=\"submit\" value=\"Submit Information\" \/><\/td>\r\n      <\/tr>\r\n    <\/table>\r\n  <\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n<\/blockquote>\r\n
Let’s say we wanted to change the balloons to be white with green text.  Here is the CSS:<\/p>\n
\n
\r\n\/*\r\n *  STEP 1: change the bubble so background is white and text is green.\r\n *\/\r\n\r\n\/* Webkit *\/\r\ninput::-webkit-validation-bubble-message {\r\n\tcolor: green !important;\r\n\tbackground: white;\r\n\tborder: 1px solid black;\r\n\tpadding: 18px;\r\n\t\r\n}\r\n\r\n\/* Polyfill styles to do the same as above *\/\r\n.wf2_errorMsg {\r\n\tcolor: green !important;\r\n\tbackground: white;\r\n}\r\n\r\n\/* Removes the icon that appears in Webkit browsers by default *\/\r\ninput::-webkit-validation-bubble-icon {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Needed for IE to get rid of gradient background, or to replace it with another gradient *\/\r\n.wf2_errorMsg {\r\n\tfilter: none !important;\r\n}\r\n\r\n\r\n\/*\r\n * Step 2: The arrow\r\n *\/\r\n\r\ninput::-webkit-validation-bubble-arrow {\r\n    background: white;\r\n    border: solid black 1px;\r\n}\r\n\r\n\/* Polyfill *\/\r\n.wf2_errorMsg:before {\r\n    \/* By default, the image is 29x15, but you can change it and position it with CSS *\/\r\n    background: url('whiteValidationPointer.png') !important;\r\n}\r\n<\/pre>\n<\/blockquote>\n
And here is the result:<\/p>\n\n\n\n\n\n
Full Name :<\/th>\n<\/p>\n
<\/div>\n<\/td>\n<\/tr>\n
Company Name :<\/th>\n<\/p>\n
<\/div>\n<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n<\/table>\n<\/form>\n
Note that you could go even further and style the validation bubbles of individual form elements as well.  For example, let’s say you had two formfields, fullName<\/code> and companyName<\/code> and you wanted the error message for fullName<\/code> to be green with a white background, and companyName<\/code> to be have yellow text.  You could do so with the following CSS:<\/p>\n
\n
\r\n\/*\r\n * Styling the \"Full Name\" error message.\r\n *\/\r\n\r\n\/*\r\n *  The background color of the main box \r\n *\/\r\n\r\n\/* Webkit *\/\r\ninput[name=\"fullName\"]::-webkit-validation-bubble-message {\r\n\tcolor: green !important;\r\n\tbackground: white;\r\n\tborder: 1px solid black;\r\n\tpadding: 18px;\r\n\t\r\n}\r\n\r\ninput[name=\"fullName\"]::-webkit-validation-bubble-icon {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Polyfill *\/\r\n#fullName_wf2_errorMsg {\r\n\tcolor: green !important;\r\n\tbackground: white;\r\n}\r\n\r\n\/* Needed for IE to get rid of gradient background, or to replace it with another gradient *\/\r\n#fullName_wf2_errorMsg .wf2_errorMsgContainer {\r\n\tfilter: none !important;\r\n}\r\n\r\n\r\n\/*\r\n * Step 2: The arrow\r\n *\/\r\n\r\n[name=\"fullName\"]::-webkit-validation-bubble-arrow {\r\n\tbackground: white;\r\n    border: solid black 1px;\r\n}\r\n\r\n\/* Polyfill *\/\r\n#fullName_wf2_errorMsg:before {\r\n\t\/* By default, the image is 29x15, but you can change it and position it with CSS *\/\r\n\tbackground: url('images\/whiteValidationPointer.png');\r\n}\r\n\r\n#companyName_wf2_errorMsg {\r\n\tcolor: yellow !important;\r\n}\r\n<\/pre>\n<\/blockquote>\n
See the above CSS in action<\/a><\/p>\n
Using CSS to Show the Validity of Form Fields As The User Types<\/h2>\n
One of the coolest things you can do with CSS and HTML5 forms is to show the user the validity state of a form element as a user is typing.<\/strong>  Fill out the following form to see what I mean:<\/p>\n\r\n\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t
Full Name :<\/th>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
<\/div>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t\t\r\n\t\t\t\t
Zip Code :<\/th>\r\n\t\t\t\t\t\r\n\t\t\t\t\t
<\/div>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t
<\/td>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n<\/form>\r\n
When the user focuses in on a particular form field, the required icon () changes to an invalid icon () until the user enters in a valid value, when the valid icon appears ().  This helps the user fill in the form correctly even before the submit button is pressed and will speed up form completion.  <\/p>\n
Here is the fully commented CSS that will show how we can implement this in all browsers (including the ones that use the webforms2 polyfill).<\/p>\n\r\n
\r\n
\r\n\/*\r\n * STEP 1: Show the user when a form field is required with an orange star.\r\n *\/\r\n\r\n\/* Browsers that implement HTML5 Forms Natively *\/\r\ninput:required, textarea:required{\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/asterisk_orange.png\") no-repeat right top;\r\n}\r\n\r\n\/* Polyfill *\/\r\ninput[required] {\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/asterisk_orange.png\") no-repeat right top;\r\n}\r\n\r\n\r\n\r\n\/*\r\n * STEP 2: Show the user when a form field has valid data in it with a green checkmark.\r\n *\/\r\n\r\n\/* Browsers that implement HTML5 Forms Natively *\/\r\ninput[required]:valid, textarea[required]:valid {\r\n\t\/* Make this important if you want IE10 to work right. *\/\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/tick.png\") no-repeat right top !important;\r\n}\r\n\r\n\/* Polyfill *\/\r\ninput[required].wf2_valid {\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/tick.png\") no-repeat right top;\r\n}\r\n\r\n\r\n\r\n\r\n\/*\r\n * STEP 3: Show the user when a form field has invalid data in it with a red 'X'.\r\n *\/\r\n\r\n\/* Browsers that implement HTML5 Forms Natively *\/\r\ninput:focus:invalid, textarea:focus:invalid {\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/cancel.png\") no-repeat right top;\r\n}\r\n\r\n\/* Polyfill *\/\r\ninput.wf2_invalid:focus {\r\n\tbackground:url(\"\/blog\/wp-content\/uploads\/2012\/04\/cancel.png\") no-repeat right top;\r\n}\r\n\r\n<\/pre>\r\n<\/blockquote>\r\n
Customizing the Error Messages<\/h2>\n
Note that the default error messages may vary<\/strong> from browser to browser:<\/p>\n\n\n\n\n\n
Opera Mac<\/th>\nFirefox Mac<\/th>\n<\/tr>\n<\/thead>\n
<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
This may not be a big deal the majority of time, but there will be some cases where you want have more control over the error messages.  Although this can be done via JavaScript using a form element’s setCustomValidity()<\/code> method, Firefox has an attribute, x-moz-errormessage<\/code> which can be used to set custom error messages easily.  I really liked this idea, so I thought it would be cool to implement a dataset attribute for HTML5Forms.js, data-errormessage<\/code>, that would do the same thing:<\/p>\n
\n
\r\n<input type=\"text\" name=\"zipc\" required=\"required\" pattern=\"[0-9]{5}(-?[0-9]{4})?\"\r\n        placeholder=\"Required information\"\r\n        data-errormessage=\"You must enter a valid Zip Code (e.g. 90210)\"<\/span> \/>\r\n<\/pre>\n<\/blockquote>\n
Below is a great example of this attribute in action:<\/p>\n\r\n\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t
Zip Code :<\/th>\r\n\t\t\t\t\t\r\n\t\t\t\t\t
<\/div>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t
<\/td>\r\n\t\t\t\t\t<\/td>\r\n\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n<\/form>\r\n
Conclusion<\/h2>\n
Validation support for HTML5 Forms in the various browsers is still spotty, but HTML5Forms.js can help if you want to do it now.  I have used it myself in a few professional projects and I hope you find out of use too.   <\/p>\n
Footnotes<\/h2>\n
^<\/a>  1<\/sup><\/a> Note that Safari and some older versions of Chrome natively support the validation CSS part of the HTML5 Forms specification, but don’t display the error message bubbles.  I believe that this is due to the version of Webkit that is being used for these browsers (v. 533 and lower).  With HTML5Forms.js, though, allows you not to worry about such problems.  :-)<\/p>\n","protected":false},"excerpt":{"rendered":"
I have updated my html5Widgets package (now called html5Forms.js<\/strong>) so developers can create great looking, easy-to-use forms that can validate each field as a user types<\/strong>.  It also has updated validation widgets<\/strong> so older browsers can display error messages like native HTML5 Form implementations do, and even allows developers to style error message bubbles in all browsers<\/strong> even in browsers like Firefox that don’t allow it natively.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,50,35,1],"tags":[],"class_list":["post-4472","post","type-post","status-publish","format-standard","hentry","category-css3","category-forms","category-html5","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=4472"}],"version-history":[{"count":264,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4472\/revisions"}],"predecessor-version":[{"id":5606,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4472\/revisions\/5606"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=4472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=4472"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=4472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}