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
Introduction
- Building modern web forms
- What you should know
- Getting set up
Form Programming Fundamentals
- Label and field interaction
- Implementing shortcut key navigation
- Automatic shortcut keys
- Form and field events
- Using the output element
- The details element in forms
- Challenge - Form programming
- Solution - Form programming
Dynamic Forms
- Dynamic field display
- The FormData object
- Sending data with FormData
- Challenge - Dynamic forms
- Solution - Dynamic forms
Support Autofill and Repopulation
- Using datalist for autocomplete
- Using dynamic datalists
- Supporting autofill
- Storing and retrieving form data
- Challenge - Autofill
- Solution - Autofill
Validate Form Data
- Overview of form validation approaches
- Leveraging basic browser validation
- Implementing better browser validation
- Using CSS to enhance dynamic validation
- Filtering key input
- Using JavaScript for validation
- Challenge - Form validation
- Solution - Form validation
Conclusion
- Next steps