Caveats

• This is an overview of HTML5 forms. Not comprehensive.
• Tested in:
  • Opera 11
  • Firefox 4
  • Safari 5
  • Chrome 10 & 11
  • Internet Explorer 8 & 9 (almost no support)

See Wufoo's EXCELLENT The Current State of HTML5 Forms (wufoo.com/html5)

Advantages to using HTML5 Forms

• Makes form validation native to HTML.*
• User interface enhancements
• Reduced need for JavaScript (only needed in browsers that don't support form types)

(*Still need to validate on the server if you are using one.)

Disadvantages (for now)

• Not well-supported by currently-used browsers
  • Opera and Chrome 11 lead the pack.
  • Of the latest final release browsers, Internet Explorer 8 & 9 have the least support.
  • Safari 5 has half-a**ed support: stealth validation.
  • Mobile browsers: Mobile Safari & Android WebKit change virtual keyboard
  • Opera Mobile 11 lags slightly behind desktop support
  • Opera Mini has no support
• Little to no control over native UI in most browsers.
• Pattern validation is inconsistent across browsers.

Disadvantages aren't so bad

• Field type will default to text if the browser doesn't support it
• Attributes are still part of the DOM tree, which makes fallbacks easy.

HTML 4 input types and elements

Still okay in HTML5.

New HTML 5 input and elements

Won’t cover all of these. Also: not all attributes apply to all input types.^[1]

Pair with CSS3 pseudo-classes ^[3]

Awesome forms.

User Interface Enhancements

Browser, OS and default errors are language-dependent.

User Interface Enhancements, part 3

Localized errors in Opera

Demo 1: E-mail addresses

<input type="email" name="emailaddy" value=""
placeholder="placeholder@example.com" required>
	

• Makes sure the e-mail address is valid.
• Bug in the validation pattern of Opera and Firefox (abc@def validates).

See it in action

Demo 2: Multiple E-mail addresses

<input type="email" name="emailaddy" value=""
placeholder="placeholder@example.com" multiple required>
	

• Accepts a comma-delimited list of e-mail addresses

See it in action

Demo 3: U.S. Telephone Numbers

<input type="tel" name="telnum" value=""
placeholder="818-555-1212"
pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$"
required>

• Can set a pattern attribute using a regular expression.
• multiple attribute and multiple values are invalid.

See it in action

Demo includes CSS 3 pseudo-classes and an optional field.

Demo 4: URLs

<input type="url" name="urlfield" value="" required>
	

• Opera: Auto-prepends http:// if it is missing and no pattern is supplied.
• Chrome & Firefox: Prompts user to enter a complete URL.
• IE No validation.
• Safari Stealth validation.
• multiple attribute is invalid.

See it in action

Demo 5: URLs with a pattern

<input type="url" name="urlfield" value=""
placeholder="ftp://"
pattern="^(ftp(?:s)?\:\/\/[a-zA-Z0-9\-]+(?:\.[a-zA-Z0-9\-]+)*\.[a-zA-Z]{2,6}(?:\/?|(?:\/[\w\-]+)*)(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$""
required>
	

• Opera: Will prompt user to enter the protocol.

See it in action

Demo 6: Range

<input type="range" name="approx"
value="" min="0" max="100" step="5">
	

• Min: Lowest value
• Min: Highest value
• Step: Sets mid-point value (in Chrome).

See it in action

Demo 7: list and <datalist>

<input type="text" name="employee" value="" list="employeelist">
<datalist id="employeelist">
    <option value="Ray Allen">
    <option value="Glenn Davis">
    <option value="Kevin Garnett">
</datalist>

• List attribute specifies a datalist.
• Datalist contains a list of suggested options.
• Only supported by Opera and Firefox 4

See it in action

Custom error messages

• Use setCustomValidity(message) function.
• Can use checkValidity() function to validate data before form submission. Works better in theory than practice.

Fall back strategies

Keep doing what we have been:

• Validate data on the server
• Use JavaScript based-error checking
• Get comfortable with text inputs instead of specialized UIs in some browsers.

Remember: These attributes are still a part of the DOM tree.

See a fall back strategy using jQuery

Links

1. Wufoo's The Current State of HTML5 Forms
2. The WHATWG HTML specification
3. User Interface element pseudo-classes and User interface states: pseudo-classes section of the CSS3 Basic User Interface Module.
4. HTML5 Forms Support in Opera
5. Forms from Dive Into HTML5
6. Forms in HTML5 from Mozilla Developer Center
7. Slides posted at http://tiffanybbrown.com/labarcamp/