Web Forms People Don't Hate

Web FormsPeople

Don’t Hate

Chris Lienert@cliener

Ooh!Double Negative!

Love

Ooh!Double Negative!EotW

End of the World

I work for Jardine Lloyd Thompson

Who used to smuggle opium

Insurance means forms

And forms

And more forms

Imagine filling that out online

Or on your mobile

Design Patterns

http://www.lukew.com/resources/web_form_design.asp

Design Patterns

Vertical label/field

Vertical Label/Field

Design Patterns

Vertical label/fieldHorizontal (search)

Horizontal (Search)

Design Patterns

Vertical label/fieldHorizontal (search)Clear path to completion

Clear Path to Completion

Design Patterns

Vertical label/fieldHorizontal (search)Clear path to completionMark optional fields

Mark Optional Fields

Don’t do this

Build

Form

Build

FormFieldset

Build

FormFieldset[no caption]

Build

FormFieldset[no caption]Block element (p, li, th, td)

Build

FormFieldset[no caption]Block element (p, li, th, td)Label (id)

Build

FormFieldset[no caption]Block element (p, li, th, td)Label (id)Field

Build

<form  method="post"  action="wds.aspx"><fieldset><p><label  for="name">Name</label>  <input  type="text"  name="name"  id="name"></p></fieldset></form>

HTML5 Forms

http://wufoo.com/html5

HTML5 Attributes

maxlength for TextArea

HTML5 Attributes

maxlength for TextArearequired

HTML5 Attributes

maxlength for TextArearequiredplaceholder

HTML5 Attributes

maxlength for TextArearequiredplaceholderautocorrect="off "

HTML5 Attributes

maxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "

HTML5 Attributes

maxlength for TextArearequiredplaceholderautocorrect="off " autocapitalize="off "autofocus

Autofocus in Practice – Type…

Autofocus in Practice – Type…

Autofocus in Practice – Argh!

Autofocus in Practice – Argh!

FIXED!

HTML5 Attributes

Pattern • default error messages are awful • doesn't scale well • does a fine robot dance

HTML5 Attributes

Pattern • pattern="/d*"

HTML5 Input Types

Email • instant win • iOS keyboard love

HTML5 Input Types

Date, Month, Week, Time • don’t

HTML5 Input Types

HTML5 Input Types

Tel • fairly useless • iOS keyboard love

People get things wrong

Validation to the rescue!

You Wouldn’t Like Me When I’m Angry

Validate Early, Validate Often

Allow people to make mistakes

Allow People to Make Mistakes

Allow People to Make Mistakes

“The real danger is not that computers will begin to think like men, but that men will begin to

think like computers.”Sydney J Harris

Allow People to Make Mistakes

Allow People to Make Mistakes

Validate Early, Validate Often

Allow people to make mistakesClearly mark invalid fields

Clearly Mark Invalid Fields

Clearly Mark Invalid Fields

<p><label  for="birth-­‐date">Birth  Date</label>  <input  type="text"  class="date"  name="birth-­‐date"  id="birth-­‐date"  required></p>

Clearly Mark Invalid Fields

<p><label  for="birth-­‐date">Birth  Date</label>  <input  type="text"  class="date"  name="birth-­‐date"  id="birth-­‐date"  required  aria-­‐invalid="true">  <label  for="birth_date"  class="errata"  role="alert">Please  enter  a  value</label></p>

Validate Early, Validate Often

Allow people to make mistakesClearly mark invalid fieldsPattern validate on entry

Pattern Validate on Entry

Validate Early, Validate Often

Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum

Enforce Minimum not Maximum

Enforce Minimum not Maximum

http://bit.ly/Oaqlre

Distraction

Validate Early, Validate Often

Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximumGet it right

Get it Right

A Bunch of Malarkey

Special Exhibit

Special Exhibit

Special Exhibit

Build

Build

Build

Build

Lots of coding

Build

Quaid JS

Embrace & extend HTML, DOM

Quaid JS

Embrace & extend HTML, DOMPolyfill older browsers

Embrace and Extend

Tel • phone

• mobile<input  type="tel"  class="mobile">

<input  type="tel"  class="phone">

Embrace and Extend

Postcode • data-­‐state-­‐field<input  type="text"  class="postcode"  data-­‐state-­‐field="state">

<select  id="state"  name="state">…</  select>

Embrace and Extend

Time

Date

Year

<input  type="text"  class="time">

<input  type="text"  class="date">

<input  type="text"  class="year">

Embrace and Extend

Numeric

Integer

Currency

<input  type="text"  class="numeric">

<input  type="text"  class="integer">

<input  type="text"  class="currency">

Embrace and Extend

Positive Numeric

Positive Integer

Positive Currency

<input  type="text"  class="positive_numeric">

<input  type="text"  class="positive_integer">

<input  type="text"  class="positive_currency">

Embrace and Extend

Credit Card

CSC

<input  type="text"  class="credit_card">

<input  type="text"  class="csc">

Data Attributes

Required if<input  type="checkbox"  name="variable-­‐field"  id="variable-­‐field">…<input  type="text"  name="target-­‐field"  id="target-­‐field"  data-­‐required-­‐field="variable-­‐field">

Data Attributes

Visible if<input  type="checkbox"  name="variable-­‐field"  id="variable-­‐field">…<p  data-­‐visible-­‐field="variable-­‐field">…</p>

Custom Validation

Inline$("#field").addValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.";    }});

Custom Validation

On Submit$("#field").addSubmitValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.  Really.";    }});

Custom Validation

Ajax Server Call$("#postcode").addServerValidation({    path:  "validation.svc/IsValidPostcode?postcode="})

Custom Validation

Ajax Servicepublic  ValidationResponse  IsValidPostcode(string  postcode,  string  caller){        using  (var  p  =  new  PostalAddressClient())        {                if  (!string.IsNullOrEmpty(postcode)  &&  !p.IsValidPostcode(postcode))                {                      …}

Custom Validation

Ajax Servicepublic  ValidationResponse  IsValidPostcode(…){                …                        return  new  ValidationResponse(…,  caller);                }        }        return  new  ValidationResponse(string.Empty,  caller);}

Custom Validation

Ajax Response>  validationResponse  {    message:  "",    caller:  "postcode"}

Plug-in Internationalisation

Custom methods and errorsquaid.forms-au-4.0.jsmessage:  {  required:      "Value  not  entered"  }

quaid.forms-ca-4.0.jsmessage:  {  required:    "Value  not  entered,  eh.  Go  Leafs!"  }

Elephant in the Room

Elephant in the Room

6+

6+ 3.6+

And the Rest

When the Lights Go Down

JavaScriptHTML5Server<label  class="server-­‐error">

Ready for the Taking

https://github.com/cliener/Quaid-JS

On a Web Site Near You

http://physical.jltsport.com.au

Plug

http://www.netmagazine.com/shop/magazines/april-2013-239

Standing on the Shoulders of Giants

WufooThe Current State of HTML5 Formshttp://wufoo.com/html5/

Luke WWeb Form Design: Filling in the Blankshttp://www.lukew.com/resources/web_form_design.aspEvolving E-commerce Checkouthttp://www.lukew.com/ff/entry.asp?1579

Standing on the Shoulders of Giants

Steve KrugDon't Make Me Thinkhttp://www.sensible.com/dmmt.html

PunkchipWAI-ARIA to enhance form validationhttp://www.punkchip.com/2010/12/aria-enhance-form-validation/