Html5 inputs
Download as PPTX, PDF1 like913 views
The document provides an overview of new HTML5 form input types, attributes, and validation techniques, highlighting the importance of native functionality for improved user experience. It discusses various input types, including email, URL, and number, as well as enhancements like the 'placeholder' and 'pattern' attributes for better user guidance. Additionally, it addresses validation practices through JavaScript and the need for polyfills to support older browsers.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More from Chris Love (20)
Html5 inputs
- 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…”
- 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