View
539
Download
0
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
Introduction to new HTML5 Form Input Types, Attributes and Validation
Chris Love
@ChrisLove
ProfessionalASPNET.com
Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS &
HTML5
Podcast Interviews
The Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNum=80
Chris Love Does Enterprise Mobilityhttp://thetabletshow.com/?ShowNum=22
Deep Fried BytesMobile Web Is Not What The Other Guys Say It Ishttp
://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/
Technology & FriendsTalking About Touchhttp://technologyandfriends.com/ <- Coming out Monday
JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.com
Coming Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????
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/
HTML5 Brings New Input Types!
Text
File
Password
Radio
Checkbox
Hidden
Submit
Image
Reset
Button
HTML5 Brings New Input Types!
URL
NUMBER
SEARCH
RANGE
DATETIME
TEL
COLOR
MONTH
WEEK
DATE
TIME
HTML5 Brings New Elements!
DATALIST
PROGRESS
HTML5 Brings New Input Attributes!
AUTOFOCUS
REQUIRED
PLACEHOLDER
PATTERN
AUTOCORRECT
AUTOCOMPLETE
MIN, MAX, STEP
FORMACTION
FORMENCTYPE
FORMMETHOD
FORMVALIDATE
FORMTARGET
READONLY
Sometimes You Just Do Not Want AutoCorrect
Why Is This All Important?
Native Functionality Always A Good Thing
Guided Input Good User Experience
Touch – Help Users Type Less
On Screen Keyboards
New Input Types Drive On Screen Keyboards
How FedEx.com Could Increase Customer Satisfaction and Profits with 10 Minutes of HTML5
http://bit.ly/16pgnv3
E-Mail Keyboard
URL Keyboard
Number Keyboard
Pattern
Allows You To Define the Data Format Validation
Good For Overriding Native Validation & Behavior
Use Regular Expressions
http://html5pattern.com/
Placeholder
Allows You to Place a Message In The Input
Good For Guidance
Can Help Save Screen Real Estate on Phones ;)
Pattern=“Great Idea…”
Validation Bubbles!
Demo Time!
CSS Hooks
Pseudo Classes That Allow You To Overwrite Default Styles
:valid
:invalid
In WebKit Can Override Message Bubbles!
Demo Time!
Constraint Validation
Validation API
willValidate – Can Node Be Validated
validity – returns a ValidityState object
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
checkValidity
Returns true if form node meets validity criteria
<form id="form-1">
<input id="input-1" type="text" required />
</form>
<script>
document.getElementById('form-1').checkValidity(); //false
document.getElementById('input-1').checkValidity(); //false
</script>
invalid Event
Fired Every Time An Input Field Fails Validation
document.getElementById('input-1').addEventListener('invalid', function() {
//Do Something Here...
}, false);
validationMessage
Contains the Message Displayed When Validity Check Fails
Pass Custom Message to setCustomValidity() method
Demo Time!
Dealing With Older Browsers
UPGRADE!!!!!!!
Dealing With Older Browsers
Use Polyfilshttps://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
Recommended