Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 183

So, for instance, if your form contains compulsory fields, consider styling these fields
more prominently (and, of course, add the required attribute so form validation will
kick in). Make it clear from the beginning the fields that must be filled in. If this is the
majority of the fields, consider adding the text “Optional” next to the optional fields.
If you need data in a certain format, don't rely on users entering it in that format—this
is what your form handler on the server is supposed to deal with. For instance, if a
user needs to enter a credit card number, let her fill it in as 1234 5678 9012 3456
if she wants (that's how it's formatted on her credit card), 1234567890123456, or
1234-5678-9012-3456—whatever works for the user, within reason. Deft use of the
pattern attribute can allow flexibility in form input but still validate critical inform-
ation and essentially formatting (such as checking that the correct number of digits was
entered). Remember, computers are supposed to save the user time. Provide a guide to a
preferred format if you like, but allow for the possibility of alternate entries.
If the user has made an error that can't be solved by server-side code, then let him
know with a clear, meaningful, and appropriate error message—the sooner, the better.
Use built-in form validation and provide JavaScript and/or server-generated validation
and error messages as a backup. The more complex your form, the more things that can
go wrong, so test, test, test, and make sure there are no meaningless error messages.
Remember that the Internet is global
If your form is not specific to any one country, try not to fill it with references to “states”
and “ZIP codes,” and certainly don't make those fields compulsory if you do include
them. Also relating to the previous point, don't try to restrict the format of the user's data
unless you are absolutely certain of its format.
Note An upcoming attribute that is relevant to the internationalization of your form
is the dirname attribute, which is specified on the textarea , text input, and
search input elements. Remember how form data is submitted as key/value pairs?
This attribute creates a key that is sent to the server, which has the directionality of the
text entered into the form control as its value. This will appear as either ltr (left to
right) or rtl (right to left). Don't expect this attribute to work today, though, because
it has yet to be implemented by major browsers. More information about it and a code
example is available at http://dev.w3.org/html5/spec/common-input-
element-attributes.html#attr-input-dirname .