bad form @ form, function & class 2016
TRANSCRIPT
BAD FORM@cliener
<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">
<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"
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
