Your SlideShare is downloading. ×
0
Introduction to new HTML5 FormInput Types, Attributes and ValidationChris Love@ChrisLoveProfessionalASPNET.com
Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HT...
Podcast InterviewsThe Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNu...
JavaScript LibrariesDeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.comPanoramaJS – JavaScript Libra...
ResourcesSlide Deck – http://www.slideshare.net/docluv <- Only URL UNeed!Source Code – https://github.com/docluv/html5inpu...
HTML5 Brings New Input Types!TextFilePasswordRadioCheckboxHiddenSubmitImageResetButton
HTML5 Brings New Input Types!URLEMAILNUMBERSEARCHRANGEDATETIMETELCOLORMONTHWEEKDATETIME
HTML5 Brings New Elements!DATALISTPROGRESS
HTML5 Brings New Input Attributes!AUTOFOCUSREQUIREDPLACEHOLDERPATTERNAUTOCORRECTAUTOCOMPLETEMIN, MAX, STEPFORMACTIONFORMEN...
Sometimes You Just Do Not Want AutoCorrect
Why Is This All Important?Native Functionality Always A Good ThingGuided Input Good User ExperienceTouch – Help Users Type...
On Screen KeyboardsNew Input Types Drive On Screen Keyboards
How FedEx.com Could Increase CustomerSatisfaction and Profits with 10 Minutes of HTML5http://bit.ly/16pgnv3
E-Mail Keyboard
URL Keyboard
Number Keyboard
PatternAllows You To Define the Data Format ValidationGood For Overriding Native Validation & BehaviorUse Regular Expressi...
PlaceholderAllows You to Place a Message In The InputGood For GuidanceCan Help Save Screen Real Estate on Phones ;)Pattern...
Validation Bubbles!
Demo Time!
CSS HooksPseudo Classes That Allow You To Overwrite Default Styles:valid:invalidIn WebKit Can Override Message Bubbles!
Demo Time!
Constraint ValidationValidation APIwillValidate – Can Node Be Validatedvalidity – returns a ValidityState object
ValidatityStatevalid – Does the Value meet criteriacustomError – true if custom message set through setCustomValidity()val...
checkValidityReturns true if form node meets validity criteria<form id="form-1"><input id="input-1" type="text" required /...
invalid EventFired Every Time An Input Field Fails Validationdocument.getElementById(input-1).addEventListener(invalid, fu...
validationMessageContains the Message Displayed When Validity Check FailsPass Custom Message to setCustomValidity() method
Demo Time!
Dealing With Older BrowsersUPGRADE!!!!!!!
Dealing With Older BrowsersUse Polyfilshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsjQuery Val...
Upcoming SlideShare
Loading in...5
×

Html5 inputs

565

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
565
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 inputs"

  1. 1. Introduction to new HTML5 FormInput Types, Attributes and ValidationChris Love@ChrisLoveProfessionalASPNET.com
  2. 2. Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  3. 3. Podcast InterviewsThe Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNum=80Chris Love Does Enterprise Mobilityhttp://thetabletshow.com/?ShowNum=22Deep 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
  4. 4. JavaScript LibrariesDeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.comPanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajsToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.comComing Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????
  5. 5. ResourcesSlide Deck – http://www.slideshare.net/docluv <- Only URL UNeed!Source Code – https://github.com/docluv/html5inputsLive Site - http://html5inputs.azurewebsites.net/
  6. 6. HTML5 Brings New Input Types!TextFilePasswordRadioCheckboxHiddenSubmitImageResetButton
  7. 7. HTML5 Brings New Input Types!URLEMAILNUMBERSEARCHRANGEDATETIMETELCOLORMONTHWEEKDATETIME
  8. 8. HTML5 Brings New Elements!DATALISTPROGRESS
  9. 9. HTML5 Brings New Input Attributes!AUTOFOCUSREQUIREDPLACEHOLDERPATTERNAUTOCORRECTAUTOCOMPLETEMIN, MAX, STEPFORMACTIONFORMENCTYPEFORMMETHODFORMVALIDATEFORMTARGETREADONLY
  10. 10. Sometimes You Just Do Not Want AutoCorrect
  11. 11. Why Is This All Important?Native Functionality Always A Good ThingGuided Input Good User ExperienceTouch – Help Users Type Less
  12. 12. On Screen KeyboardsNew Input Types Drive On Screen Keyboards
  13. 13. How FedEx.com Could Increase CustomerSatisfaction and Profits with 10 Minutes of HTML5http://bit.ly/16pgnv3
  14. 14. E-Mail Keyboard
  15. 15. URL Keyboard
  16. 16. Number Keyboard
  17. 17. PatternAllows You To Define the Data Format ValidationGood For Overriding Native Validation & BehaviorUse Regular Expressionshttp://html5pattern.com/
  18. 18. PlaceholderAllows You to Place a Message In The InputGood For GuidanceCan Help Save Screen Real Estate on Phones ;)Pattern=“Great Idea…”
  19. 19. Validation Bubbles!
  20. 20. Demo Time!
  21. 21. CSS HooksPseudo Classes That Allow You To Overwrite Default Styles:valid:invalidIn WebKit Can Override Message Bubbles!
  22. 22. Demo Time!
  23. 23. Constraint ValidationValidation APIwillValidate – Can Node Be Validatedvalidity – returns a ValidityState object
  24. 24. ValidatityStatevalid – Does the Value meet criteriacustomError – true if custom message set through setCustomValidity()valueMissing – no valuetypeMismatch – not valid based on input typepatternMismatch – does not match the supplied patternrangeOverflow & rangeUnderflow – Over or under the max and min attribute valuesstepMismatch – invalid per step attributetooLong – exceeds maxLength value
  25. 25. checkValidityReturns 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(); //falsedocument.getElementById(input-1).checkValidity(); //false</script>
  26. 26. invalid EventFired Every Time An Input Field Fails Validationdocument.getElementById(input-1).addEventListener(invalid, function() {//Do Something Here...}, false);
  27. 27. validationMessageContains the Message Displayed When Validity Check FailsPass Custom Message to setCustomValidity() method
  28. 28. Demo Time!
  29. 29. Dealing With Older BrowsersUPGRADE!!!!!!!
  30. 30. Dealing With Older BrowsersUse Polyfilshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsjQuery Validation Pluginhttp://bassistance.de/jquery-plugins/jquery-plugin-validation/ <- Should Kick In WhenNeeded
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×