A presentation for the students at the "Design for the Web" course at Tower Hamlets College.
Design forthe WebPoplar, Feb '13
View Slide
Peter Gasston@stopsatgreen
Creative Technologistrehabstudio.com(almost)
1. HTML5 Forms2. 3 Good Reasons3. Advice
HTML5 Forms
Forms are the focalpoint of most of theuser's interactionwith your website.
1. Relationship2. Conversation3. Appearancehttp://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/Form Usability
Text inputs
Number inputs
Date inputs
Outputs
ConstraintValidation
Required fields
PatternMatching
Pattern matchingtitle="Numbers only!!!">
LimitMatching
Limit matching
CSS for FormValidation
UI State Pseudo-classes:required || :optional:valid || :invalid:in-range || :out-of-range
JavaScriptfor FormValidation
Constraint Validation APIel.willValidateel.checkValidity()el.validity
Constraint Validation Eventsel.addEventListener('invalid',foo);el.setCustomValidity('PLOP');
Enough aboutbloody forms
Working onthe Web
It is yourIt is yourpatrioticpatriotic dutyduty
Sharing =innovation
The adjacentpossible
The fruits ofhard-earnedexperience
Be empatheticand subjective
Neither your opinion ofwhat users should think,nor my opinion of whatusers should think, mattersas much as what usersactually do think. Be ascientist, not a priest.- Mark Shuttleworth
Be anidealisticpragmatist
Never try to discouragethinking, for you are sureto succeed.- Bertrand Russell
Be confident inyour knowledge
http://xkcd.com/386/
Be willingto learn
Be unsatisfied
Be involvedin everything
Be acommunicator
Be anarchivist
Be professional
Fin.