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