• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Forms People Don't Hate
 

Web Forms People Don't Hate

on

  • 3,011 views

Presentation from the Edge of the Web conference on March 15 2013 in Perth, Australia

Presentation from the Edge of the Web conference on March 15 2013 in Perth, Australia

Statistics

Views

Total Views
3,011
Views on SlideShare
2,994
Embed Views
17

Actions

Likes
5
Downloads
11
Comments
0

1 Embed 17

https://twitter.com 17

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Forms People Don't Hate Web Forms People Don't Hate Presentation Transcript

    • Web Forms PeopleDon’t Hate Chris Lienert @cliener
    • Ooh!Double Negative!
    • Love
    • Ooh! EotWDouble Negative!
    • 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 Patternshttp://www.lukew.com/resources/web_form_design.asp
    • Design PatternsVertical label/field
    • Vertical Label/Field
    • Design PatternsVertical label/fieldHorizontal (search)
    • Horizontal (Search)
    • Design PatternsVertical label/fieldHorizontal (search)Clear path to completion
    • Clear Path to Completion
    • Design PatternsVertical label/fieldHorizontal (search)Clear path to completionMark optional fields
    • Mark Optional Fields
    • Don’t do this
    • BuildForm
    • BuildFormFieldset
    • BuildFormFieldset[no caption]
    • BuildFormFieldset[no caption]Block element (p, li, th, td)
    • BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)
    • BuildFormFieldset[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 Formshttp://wufoo.com/html5
    • HTML5 Attributesmaxlength for TextArea
    • HTML5 Attributesmaxlength for TextArearequired
    • HTML5 Attributesmaxlength for TextArearequiredplaceholder
    • HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "
    • HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
    • HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "autofocus
    • Autofocus in Practice – Type…
    • Autofocus in Practice – Type…
    • Autofocus in Practice – Argh!
    • Autofocus in Practice – Argh! F IX E D !
    • HTML5 AttributesPattern • default error messages are awful • doesnt scale well • does a fine robot dance
    • HTML5 AttributesPattern • pattern="/d*"
    • HTML5 Input TypesEmail • instant win • iOS keyboard love
    • HTML5 Input TypesDate, Month, Week, Time • don’t
    • HTML5 Input Types
    • HTML5 Input TypesTel • 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 OftenAllow people to make mistakes
    • Allow People to Make Mistakes
    • Allow People to Make Mistakes
    • Allow People to Make Mistakes “The real danger is not thatcomputers will begin to think like men, but that men will begin to think like computers.” Sydney J Harris
    • Allow People to Make Mistakes
    • Validate Early,Validate OftenAllow 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 OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entry
    • Pattern Validate on Entry
    • Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum
    • Enforce Minimum not Maximum
    • Enforce Minimum not Maximum
    • Distractionhttp://bit.ly/Oaqlre
    • Validate Early,Validate OftenAllow 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 JSEmbrace & extend HTML, DOM
    • Quaid JSEmbrace & extend HTML, DOMPolyfill older browsers
    • Embrace and ExtendTel • phone <input  type="tel"  class="phone"> • mobile <input  type="tel"  class="mobile">
    • Embrace and ExtendPostcode • data-­‐state-­‐field<input  type="text"  class="postcode"  data-­‐state-­‐field="state"><select  id="state"  name="state">…</  select>
    • Embrace and ExtendTime<input  type="text"  class="time">Date<input  type="text"  class="date">Year<input  type="text"  class="year">
    • Embrace and ExtendNumeric<input  type="text"  class="numeric">Integer<input  type="text"  class="integer">Currency<input  type="text"  class="currency">
    • Embrace and ExtendPositive Numeric<input  type="text"  class="positive_numeric">Positive Integer<input  type="text"  class="positive_integer">Positive Currency<input  type="text"  class="positive_currency">
    • Embrace and ExtendCredit Card<input  type="text"  class="credit_card">CSC<input  type="text"  class="csc">
    • Data AttributesRequired 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 AttributesVisible if<input  type="checkbox"  name="variable-­‐field"  id="variable-­‐field">…<p  data-­‐visible-­‐field="variable-­‐field">…</p>
    • Custom ValidationInline$("#field").addValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.";    }});
    • Custom ValidationOn Submit$("#field").addSubmitValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.  Really.";    }});
    • Custom ValidationAjax Server Call$("#postcode").addServerValidation({    path:  "validation.svc/IsValidPostcode?postcode="})
    • Custom ValidationAjax Servicepublic  ValidationResponse  IsValidPostcode(string  postcode,  string  caller){        using  (var  p  =  new  PostalAddressClient())        {                if  (!string.IsNullOrEmpty(postcode)  &&  !p.IsValidPostcode(postcode))                {                      …}
    • Custom ValidationAjax Servicepublic  ValidationResponse  IsValidPostcode(…){                …                        return  new  ValidationResponse(…,  caller);                }        }        return  new  ValidationResponse(string.Empty,  caller);}
    • Custom ValidationAjax Response>  validationResponse  {    message:  "",    caller:  "postcode"}
    • Plug-in InternationalisationCustom 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+
    • And the Rest6+ 3.6+
    • When the Lights Go DownJavaScriptHTML5Server<label  class="server-­‐error">
    • Ready for the Takinghttps://github.com/cliener/Quaid-JS
    • On a Web Site Near Youhttp://physical.jltsport.com.au
    • Plughttp://www.netmagazine.com/shop/magazines/april-2013-239
    • Standing on the Shoulders of GiantsWufooThe 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 GiantsSteve KrugDont Make Me Thinkhttp://www.sensible.com/dmmt.htmlPunkchipWAI-ARIA to enhance form validationhttp://www.punkchip.com/2010/12/aria-enhance-form-validation/