JavaScript: Web Form Programming

Get practical techniques for building modern web forms. Learn how to create forms that return clean data and are easy for users to understand, navigate, and complete.

Introduction

• Building modern web forms
• What you should know
• Getting set up

1. Form Programming Fundamentals

• Label and field interaction
• Implementing shortcut key navigation
• Automatic shortcut keys
• Form and field events
• Using the output element
• Challenge: Form programming
• Solution: Form programming

2. Dynamic Forms

• Dynamic field display
• The FormData object
• Sending data with FormData
• Challenge: Dynamic forms
• Solution: Dynamic forms

3. Support Autofill and Repopulation

• Using datalist for autocomplete
• Using dynamic datalists
• Supporting autofill
• Storing and retrieving form data
• Challenge: Autofill
• Solution: Autofill

4. 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