HTML5: Web Forms in Depth

with Joe Marini
please wait ...
HTML5: Web Forms in Depth
Video duration: 0s 1h 58m Beginner


In this course, author Joe Marini details the latest enhancements for client-side forms found in HTML5. Using real-world examples, the course showcases the capabilities of the specification's new attributes and form elements, such as displaying default placeholder text, setting required fields, capturing email addresses, and presenting calculation results within a form. The course also demonstrates mobile device support for HTML5 forms and shows how to modernize existing forms while maintaining backwards compatibility for older browsers.

Topics include:
  • Autofilling previously entered data with autocomplete
  • Constraining form field data with a regular expression
  • Using text-selection APIs
  • Building CSS styling for invalid, valid, and required fields
  • Creating a search field
  • Including a phone number input field
  • Formatting number fields
  • Building a date picker
  • Creating a list of suggested entries
  • Indicating measurements
Developer Web


- [Voiceover] Hi, I'm Joe Marini, and I'd like to welcome you to HTML5 Web Forms In Depth. In this course we're going to learn about the new capabilities of web forms in HTML5. I'll show you how to use the new form attributes which replace many of the scripting techniques you need to use today to implement common features like AutoFocus and Required fields. The we'll move on to the new input types which provide new ways of gathering data from users and validating it. I'll walk you through the new form elements, that are available to use in HTML5 like the Data List, and Progress Elements, and see how the new HTML5 form features work in the mobile web environment.

And finally we'll see how to take an existing web form, and enhance it to work in modern HTML5 browsers, while providing fallback features for older browsers using free tools available on the web today such as jQuery, and Modernizr. Now if all of that is enough to get you excited, then let's get started with HTML5 Web Forms In Depth.

please wait ...