Bad Form @ JSConf Asia 2014

BAD FORM

@cliener

wufoo.com/html5/

<input  type="email">

<input  type="tel">

<input  type="url">

<input  type="number">

<input  type="datetime">

<input  required>

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

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

<input  pattern="/d*">

<input  autocorrect="off">

<input  autocapitalize="off">

<input  autofocus>

FIXED!

Form

FormFieldset

FormFieldset[no legend]

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

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

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

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

Vertical label/field

Vertical label/fieldHorizontal (search)

Vertical label/fieldHorizontal (search)Clear path to completion

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

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 mistakesClearly mark invalid fields

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

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

Allow people to make mistakesClearly mark invalid fieldsPattern validate on entry

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

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

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

Embrace & extend HTML, DOM

Embrace & extend HTML, DOMPolyfill older browsers

Lots of coding

QUAID JSgithub.com/cliener/Quaid-JS

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

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

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

get better. It’s not.”Dr Seuss

@cliener

slideshare.net/cliener