Data entry is boring. Developing web forms is tedious and can be complicated. As AJAX heavy applications have become the standard of today’s web developers have relied on many third party plugins and libraries to add client-side value to data entry forms. Modern browsers implement many of these features natively, in many cases eliminating the need to load and maintain an application against a third party library. In this session I will review new input types, attributes, styling and validation techniques that should make you forget those third party libraries for your next project.
1. Introduction to new HTML5 Form
Input Types, Attributes and Validation
Chris Love
@ChrisLove
ProfessionalASPNET.com
2. Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
3. Podcast Interviews
The Tablet Show
Chris Love Talks Surface Pro, Mobile Development and More
http://thetabletshow.com/?ShowNum=80
Chris Love Does Enterprise Mobility
http://thetabletshow.com/?ShowNum=22
Deep Fried Bytes
Mobile Web Is Not What The Other Guys Say It Is
http://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/
Technology & Friends
Talking About Touch
http://technologyandfriends.com/ <- Coming out Monday
4. JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Library
http://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5
https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phone
http://toolbarjs.com
Coming Soon!
SPA – Single Page Application Router, View Manager
Backpack – Markup Manager leveraging LocalStorage
FannyPack – Markup Manager leveraging on page markup
??????
5. Resources
Slide Deck – http://www.slideshare.net/docluv <- Only URL U
Need!
Source Code – https://github.com/docluv/html5inputs
Live Site - http://html5inputs.azurewebsites.net/
6. HTML5 Brings New Input Types!
Text
File
Password
Radio
Checkbox
Hidden
Submit
Image
Reset
Button
7. HTML5 Brings New Input Types!
URL
EMAIL
NUMBER
SEARCH
RANGE
DATETIME
TEL
COLOR
MONTH
WEEK
DATE
TIME
17. Pattern
Allows You To Define the Data Format Validation
Good For Overriding Native Validation & Behavior
Use Regular Expressions
http://html5pattern.com/
18. Placeholder
Allows You to Place a Message In The Input
Good For Guidance
Can Help Save Screen Real Estate on Phones ;)
Pattern=“Great Idea…”
24. ValidatityState
valid – Does the Value meet criteria
customError – true if custom message set through setCustomValidity()
valueMissing – no value
typeMismatch – not valid based on input type
patternMismatch – does not match the supplied pattern
rangeOverflow & rangeUnderflow – Over or under the max and min attribute values
stepMismatch – invalid per step attribute
tooLong – exceeds maxLength value
26. invalid Event
Fired Every Time An Input Field Fails Validation
document.getElementById('input-1').addEventListener('invalid', function() {
//Do Something Here...
}, false);
30. Dealing With Older Browsers
Use Polyfils
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
jQuery Validation Plugin
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ <- Should Kick In When
Needed