JavaScript: Web Form Programming

2h 48mAdvanced2024-11-15

Authors

Joe Marini

Senior Developer Advocate at Google, Developer

Course details

Whether your users are ordering food or filling out a job application, web forms will play a role in collecting their information. And as a developer, you want to ensure that your users have a positive experience with your web app—and that the data you collect from them via web forms is clean. In this course, join instructor Joe Marini as he shares techniques for building modern web forms that return clean data and are easy for users to understand, navigate, and complete. Learn how to enhance your forms by properly using labels and implementing keyboard shortcuts. Plus, explore how to dynamically control form field behavior, leverage different validation approaches, and support autofill and autocomplete.

Skills covered

FormsInteractive Web ContentHTMLJavaScriptWeb DesignOracleProgramming LanguagesBusiness Software and ToolsOpen SourceSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Building modern web forms
02 - What you should know
03 - Getting set up

1. Form Programming Fundamentals

04 - Label and field interaction
05 - Implementing shortcut key navigation
06 - Automatic shortcut keys
07 - Form and field events
08 - Using the output element
09 - The details element in forms
10 - Challenge - Form programming
11 - Solution - Form programming

2. Dynamic Forms

12 - Dynamic field display
13 - The FormData object
14 - Sending data with FormData
15 - Challenge - Dynamic forms
16 - Solution - Dynamic forms

3. Support Autofill and Repopulation

17 - Using datalist for autocomplete
18 - Using dynamic datalists
19 - Supporting autofill
20 - Storing and retrieving form data
21 - Challenge - Autofill
22 - Solution - Autofill

4. Validate Form Data

23 - Overview of form validation approaches
24 - Leveraging basic browser validation
25 - Implementing better browser validation
26 - Using CSS to enhance dynamic validation
27 - Filtering key input
28 - Using JavaScript for validation
29 - Challenge - Form validation
30 - Solution - Form validation

Conclusion

31 - Next steps