html5 inputs
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.TRANSCRIPT
![Page 1: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/1.jpg)
Introduction to new HTML5 Form Input Types, Attributes and Validation
Chris Love
@ChrisLove
ProfessionalASPNET.com
![Page 2: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/2.jpg)
Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS &
HTML5
![Page 3: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/3.jpg)
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
![Page 4: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/4.jpg)
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??????
![Page 5: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/5.jpg)
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/
![Page 6: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/6.jpg)
HTML5 Brings New Input Types!
Text
File
Password
Radio
Checkbox
Hidden
Submit
Image
Reset
Button
![Page 7: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/7.jpg)
HTML5 Brings New Input Types!
URL
NUMBER
SEARCH
RANGE
DATETIME
TEL
COLOR
MONTH
WEEK
DATE
TIME
![Page 8: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/8.jpg)
HTML5 Brings New Elements!
DATALIST
PROGRESS
![Page 9: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/9.jpg)
HTML5 Brings New Input Attributes!
AUTOFOCUS
REQUIRED
PLACEHOLDER
PATTERN
AUTOCORRECT
AUTOCOMPLETE
MIN, MAX, STEP
FORMACTION
FORMENCTYPE
FORMMETHOD
FORMVALIDATE
FORMTARGET
READONLY
![Page 10: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/10.jpg)
Sometimes You Just Do Not Want AutoCorrect
![Page 11: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/11.jpg)
Why Is This All Important?
Native Functionality Always A Good Thing
Guided Input Good User Experience
Touch – Help Users Type Less
![Page 12: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/12.jpg)
On Screen Keyboards
New Input Types Drive On Screen Keyboards
![Page 13: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/13.jpg)
How FedEx.com Could Increase Customer Satisfaction and Profits with 10 Minutes of HTML5
http://bit.ly/16pgnv3
![Page 14: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/14.jpg)
E-Mail Keyboard
![Page 15: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/15.jpg)
URL Keyboard
![Page 16: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/16.jpg)
Number Keyboard
![Page 17: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/17.jpg)
Pattern
Allows You To Define the Data Format Validation
Good For Overriding Native Validation & Behavior
Use Regular Expressions
http://html5pattern.com/
![Page 18: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/18.jpg)
Placeholder
Allows You to Place a Message In The Input
Good For Guidance
Can Help Save Screen Real Estate on Phones ;)
Pattern=“Great Idea…”
![Page 19: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/19.jpg)
Validation Bubbles!
![Page 20: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/20.jpg)
Demo Time!
![Page 21: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/21.jpg)
CSS Hooks
Pseudo Classes That Allow You To Overwrite Default Styles
:valid
:invalid
In WebKit Can Override Message Bubbles!
![Page 22: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/22.jpg)
Demo Time!
![Page 23: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/23.jpg)
Constraint Validation
Validation API
willValidate – Can Node Be Validated
validity – returns a ValidityState object
![Page 24: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/24.jpg)
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
![Page 25: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/25.jpg)
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>
![Page 26: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/26.jpg)
invalid Event
Fired Every Time An Input Field Fails Validation
document.getElementById('input-1').addEventListener('invalid', function() {
//Do Something Here...
}, false);
![Page 27: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/27.jpg)
validationMessage
Contains the Message Displayed When Validity Check Fails
Pass Custom Message to setCustomValidity() method
![Page 28: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/28.jpg)
Demo Time!
![Page 29: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/29.jpg)
Dealing With Older Browsers
UPGRADE!!!!!!!
![Page 30: Html5 inputs](https://reader035.vdocuments.net/reader035/viewer/2022062307/55514fb0b4c905bd1c8b563a/html5/thumbnails/30.jpg)
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