75
BAD FORM @cliener

Bad Form @ JSConf Asia 2014

  • Upload
    cliener

  • View
    749

  • Download
    2

Embed Size (px)

DESCRIPTION

At any given time and place, if you listen carefully, you can hear the screams of frustration from people trying to fill out a form on the web. We web developers are the ones who can fix it and I'll show you how.

Citation preview

Page 1: Bad Form @ JSConf Asia 2014

BAD FORM

@cliener

Page 2: Bad Form @ JSConf Asia 2014
Page 3: Bad Form @ JSConf Asia 2014
Page 4: Bad Form @ JSConf Asia 2014
Page 5: Bad Form @ JSConf Asia 2014

wufoo.com/html5/

Page 6: Bad Form @ JSConf Asia 2014

<input  type="email">

Page 7: Bad Form @ JSConf Asia 2014

<input  type="tel">

Page 8: Bad Form @ JSConf Asia 2014

<input  type="url">

Page 9: Bad Form @ JSConf Asia 2014

<input  type="number">

Page 10: Bad Form @ JSConf Asia 2014

<input  type="datetime">

Page 11: Bad Form @ JSConf Asia 2014
Page 12: Bad Form @ JSConf Asia 2014

<input  required>

Page 13: Bad Form @ JSConf Asia 2014

<input  placeholder=                "dd/mm/yyyy">

Page 14: Bad Form @ JSConf Asia 2014

webaxe.org/floated-labels-still-suck/

Page 15: Bad Form @ JSConf Asia 2014

<input  pattern="/d*">

Page 16: Bad Form @ JSConf Asia 2014

<input  autocorrect="off">

Page 17: Bad Form @ JSConf Asia 2014

<input  autocapitalize="off">

Page 18: Bad Form @ JSConf Asia 2014

<input  autofocus>

Page 19: Bad Form @ JSConf Asia 2014
Page 20: Bad Form @ JSConf Asia 2014
Page 21: Bad Form @ JSConf Asia 2014
Page 22: Bad Form @ JSConf Asia 2014

FIXED!

Page 23: Bad Form @ JSConf Asia 2014
Page 24: Bad Form @ JSConf Asia 2014

Form

Page 25: Bad Form @ JSConf Asia 2014

FormFieldset

Page 26: Bad Form @ JSConf Asia 2014

FormFieldset[no legend]

Page 27: Bad Form @ JSConf Asia 2014

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

Page 28: Bad Form @ JSConf Asia 2014

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

Page 29: Bad Form @ JSConf Asia 2014

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

Page 30: Bad Form @ JSConf Asia 2014

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

Page 31: Bad Form @ JSConf Asia 2014

Vertical label/field

Page 32: Bad Form @ JSConf Asia 2014
Page 33: Bad Form @ JSConf Asia 2014
Page 34: Bad Form @ JSConf Asia 2014

Vertical label/fieldHorizontal (search)

Page 35: Bad Form @ JSConf Asia 2014
Page 36: Bad Form @ JSConf Asia 2014

Vertical label/fieldHorizontal (search)Clear path to completion

Page 37: Bad Form @ JSConf Asia 2014
Page 38: Bad Form @ JSConf Asia 2014
Page 39: Bad Form @ JSConf Asia 2014

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

Page 40: Bad Form @ JSConf Asia 2014
Page 41: Bad Form @ JSConf Asia 2014
Page 42: Bad Form @ JSConf Asia 2014
Page 43: Bad Form @ JSConf Asia 2014
Page 44: Bad Form @ JSConf Asia 2014

Allow people to make mistakes

Page 45: Bad Form @ JSConf Asia 2014
Page 46: Bad Form @ JSConf Asia 2014
Page 47: Bad Form @ JSConf Asia 2014

“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

Page 48: Bad Form @ JSConf Asia 2014
Page 49: Bad Form @ JSConf Asia 2014

Allow people to make mistakesClearly mark invalid fields

Page 50: Bad Form @ JSConf Asia 2014
Page 51: Bad Form @ JSConf Asia 2014

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

Page 52: Bad Form @ JSConf Asia 2014

<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>

Page 53: Bad Form @ JSConf Asia 2014

Allow people to make mistakesClearly mark invalid fieldsPattern validate on entry

Page 54: Bad Form @ JSConf Asia 2014

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

Page 55: Bad Form @ JSConf Asia 2014
Page 56: Bad Form @ JSConf Asia 2014

"4123  5678  9012  3456"  .replace(/(\s)/g,  "");  >>>  "4123567890123456"

Page 57: Bad Form @ JSConf Asia 2014
Page 58: Bad Form @ JSConf Asia 2014
Page 59: Bad Form @ JSConf Asia 2014
Page 60: Bad Form @ JSConf Asia 2014
Page 61: Bad Form @ JSConf Asia 2014

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

Page 62: Bad Form @ JSConf Asia 2014
Page 63: Bad Form @ JSConf Asia 2014
Page 64: Bad Form @ JSConf Asia 2014

Embrace & extend HTML, DOM

Page 65: Bad Form @ JSConf Asia 2014

Embrace & extend HTML, DOMPolyfill older browsers

Page 66: Bad Form @ JSConf Asia 2014
Page 67: Bad Form @ JSConf Asia 2014
Page 68: Bad Form @ JSConf Asia 2014
Page 69: Bad Form @ JSConf Asia 2014
Page 70: Bad Form @ JSConf Asia 2014

Lots of coding

Page 71: Bad Form @ JSConf Asia 2014

QUAID JSgithub.com/cliener/Quaid-JS

Page 72: Bad Form @ JSConf Asia 2014

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

Page 73: Bad Form @ JSConf Asia 2014

creativebloq.com/javascript/build-better-web-forms-javascript-10135045

Page 74: Bad Form @ JSConf Asia 2014

“Unless someone like you cares a whole awful lot nothing is going to

get better. It’s not.”Dr Seuss

Page 75: Bad Form @ JSConf Asia 2014

@cliener

slideshare.net/cliener