Html5 inputs
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html5 inputs

  • 774 views
Uploaded 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......

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
774
On Slideshare
774
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to new HTML5 FormInput Types, Attributes and ValidationChris Love@ChrisLoveProfessionalASPNET.com
  • 2. Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  • 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. 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. ResourcesSlide Deck – http://www.slideshare.net/docluv <- Only URL UNeed!Source Code – https://github.com/docluv/html5inputsLive Site - http://html5inputs.azurewebsites.net/
  • 6. HTML5 Brings New Input Types!TextFilePasswordRadioCheckboxHiddenSubmitImageResetButton
  • 7. HTML5 Brings New Input Types!URLEMAILNUMBERSEARCHRANGEDATETIMETELCOLORMONTHWEEKDATETIME
  • 8. HTML5 Brings New Elements!DATALISTPROGRESS
  • 9. HTML5 Brings New Input Attributes!AUTOFOCUSREQUIREDPLACEHOLDERPATTERNAUTOCORRECTAUTOCOMPLETEMIN, MAX, STEPFORMACTIONFORMENCTYPEFORMMETHODFORMVALIDATEFORMTARGETREADONLY
  • 10. Sometimes You Just Do Not Want AutoCorrect
  • 11. Why Is This All Important?Native Functionality Always A Good ThingGuided Input Good User ExperienceTouch – Help Users Type Less
  • 12. On Screen KeyboardsNew Input Types Drive On Screen Keyboards
  • 13. How FedEx.com Could Increase CustomerSatisfaction and Profits with 10 Minutes of HTML5http://bit.ly/16pgnv3
  • 14. E-Mail Keyboard
  • 15. URL Keyboard
  • 16. Number Keyboard
  • 17. PatternAllows You To Define the Data Format ValidationGood For Overriding Native Validation & BehaviorUse Regular Expressionshttp://html5pattern.com/
  • 18. PlaceholderAllows You to Place a Message In The InputGood For GuidanceCan Help Save Screen Real Estate on Phones ;)Pattern=“Great Idea…”
  • 19. Validation Bubbles!
  • 20. Demo Time!
  • 21. CSS HooksPseudo Classes That Allow You To Overwrite Default Styles:valid:invalidIn WebKit Can Override Message Bubbles!
  • 22. Demo Time!
  • 23. Constraint ValidationValidation APIwillValidate – Can Node Be Validatedvalidity – returns a ValidityState object
  • 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. 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. invalid EventFired Every Time An Input Field Fails Validationdocument.getElementById(input-1).addEventListener(invalid, function() {//Do Something Here...}, false);
  • 27. validationMessageContains the Message Displayed When Validity Check FailsPass Custom Message to setCustomValidity() method
  • 28. Demo Time!
  • 29. Dealing With Older BrowsersUPGRADE!!!!!!!
  • 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