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

8. HTML5 Brings New Elements!
DATALIST
PROGRESS

9. HTML5 Brings New Input Attributes!
AUTOFOCUS
REQUIRED
PLACEHOLDER
PATTERN
AUTOCORRECT
AUTOCOMPLETE
MIN, MAX, STEP
FORMACTION
FORMENCTYPE
FORMMETHOD
FORMVALIDATE
FORMTARGET
READONLY

10. Sometimes You Just Do Not Want AutoCorrect

11. Why Is This All Important?
Native Functionality Always A Good Thing
Guided Input Good User Experience
Touch – Help Users Type Less

12. On Screen Keyboards
New Input Types Drive On Screen Keyboards

13. How FedEx.com Could Increase Customer
Satisfaction and Profits with 10 Minutes of HTML5
http://bit.ly/16pgnv3

14. E-Mail Keyboard

15. URL Keyboard

16. Number Keyboard

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…”

19. Validation Bubbles!

20. Demo Time!

21. CSS Hooks
Pseudo Classes That Allow You To Overwrite Default Styles
:valid
:invalid
In WebKit Can Override Message Bubbles!

22. Demo Time!

23. Constraint Validation
Validation API
willValidate – Can Node Be Validated
validity – returns a ValidityState object

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

25. 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>

26. invalid Event
Fired Every Time An Input Field Fails Validation
document.getElementById('input-1').addEventListener('invalid', function() {
//Do Something Here...
}, false);

27. validationMessage
Contains the Message Displayed When Validity Check Fails
Pass Custom Message to setCustomValidity() method

28. Demo Time!

29. Dealing With Older Browsers
UPGRADE!!!!!!!

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