W05 Learning Activity: HTML Forms
Overview
In WDD 130, you were introduced to basic form design concepts. This activity continues that exploration by examining form design and development in greater depth.
"The <form> HTML element represents a document section containing interactive controls for submitting information." – MDN
Course Learning Outcomes
- Develop responsive web pages that follow best practices and use valid HTML and CSS.
Prepare
Forms provide an interface for users to send information to a website or application. This course focuses on frontend form design and does not cover form data processing.
- Read: General Accessibility Guidance for Forms – designsystem.digital.gov
- Read: Learning about HTML Form Attributes – sitepoint.com
This CodePen ☼ Form Input Pattern Testing provides a simple interface for testing form input patterns.
Instructions
In this activity, you will practice building a form that uses several different form elements while applying form design principles and best practices. This activity will prepare you to design and develop a form for the project.
The following videos explain and demonstrate form design principles that focus on user interaction and experience. Watch all of the videos in the series, and feel free to adjust the playback speed as needed.
Before you watch the third video, download the start files (zip) linked next to it so that you can follow along in your own editor.
- Overview of Web Forms
- Best Practices for Web Forms
- Building a Web Form | Start Files (zip)
- Styling a Web Form
- Checking for Best Practices
- Common Mistakes in Web Form Design