Start learning with our library of video tutorials taught by experts. Get started

HTML5: Web Forms in Depth

HTML5: Web Forms in Depth

with Joe Marini
Expand all | Collapse all
  1. 7m 26s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 59s
    3. Installing the essential tools
      2m 36s
    4. Using HTML5 Forms in the real world
      1m 50s
  2. 8m 54s
    1. What's new in HTML5 Forms?
      5m 6s
    2. Overview of the new HTML5 Forms features
      3m 48s
  3. 31m 8s
    1. Designating a default active form field using the autofocus attribute
      3m 45s
    2. Auto-filling previously entered data with the autocomplete attribute
      3m 17s
    3. Displaying placeholder text in form fields
      5m 14s
    4. Constraining form field data with a regular expression using the pattern attribute
      3m 28s
    5. Creating Submit buttons that bypass validation rules using the novalidate attribute
      3m 28s
    6. Setting required fields
      2m 59s
    7. Using the text selection APIs
      4m 42s
    8. Building CSS styling for invalid, valid, and required fields
      4m 15s
  4. 30m 25s
    1. Creating a search field
      2m 44s
    2. Capturing email addresses
      3m 18s
    3. Building a web address field
      3m 35s
    4. Creating a phone number input field
      2m 22s
    5. Formatting number fields
      4m 44s
    6. Creating fields for capturing number ranges
      4m 10s
    7. Building a date picker field
      7m 22s
    8. Invoking the color picker for field input
      2m 10s
  5. 18m 51s
    1. Creating a list of suggested entries using the datalist element
      3m 50s
    2. Using the progress element to create a progress bar
      3m 52s
    3. Indicating measurements with the meter element
      5m 33s
    4. Displaying the results of a calculation using the output element
      5m 36s
  6. 20m 56s
    1. HTML5 Forms and mobile
      8m 41s
    2. Transforming an ordinary form into an HTML5 form
      12m 15s
  7. 53s
    1. Goodbye
      53s

Video: Welcome

Hi! I am Joe Marini, and I'd like to welcome you to HTML5: Web Forms in Depth. In this course, we are 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. Then we will 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 datalist and progress elements, and see how the new HTML5 form features work in the mobile web environment.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5: Web Forms in Depth
1h 58m Beginner May 31, 2011

Viewers: in countries Watching now:

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
Subjects:
Web Web Design Web Development
Software:
HTML
Author:
Joe Marini

Welcome

Hi! I am Joe Marini, and I'd like to welcome you to HTML5: Web Forms in Depth. In this course, we are 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. Then we will 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 datalist 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 that is enough to get you excited, then let's get started with HTML5 Web Forms in Depth.

There are currently no FAQs about HTML5: Web Forms in Depth.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Web Forms in Depth.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked