bad form @ form, function & class 2016

BAD FORM@cliener

wufoo.com/html5/

<input type="email">

<input type="tel">

<input type="url">

<input type="number">

<input type="datetime">

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

<input autocomplete="off">

<input type="password" autocomplete="off">

Form

FormFieldset

FormFieldsetLegend or Header

FormFieldsetLegend or HeaderBlock element (p, li, th, td)

FormFieldsetLegend or HeaderBlock element (p, li, th, td)Label (id)

FormFieldsetLegend or Header Block element (p, li, th, td)Label (id)Field

<form method="post" action="ffcph.php"><fieldset><legend>FFPH FTW</legend><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="input-text">Text Input</label> <input type="text" name="input-text" id="input-text" required></p>

<p class="c-form__field-box--error"><label for="input-text">Text Input</label><label class="c-form__label--error" for="input-text-error" aria-live="assertive">Error message</label> <input type="text" name="input-text" id="input-text" required></p>

Allow people to make mistakesClearly mark invalid fieldsEnforce minimum not maximum

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

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