Bad Form @ JSConf Asia 2014
-
Upload
cliener -
Category
Technology
-
view
748 -
download
2
description
Transcript of 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