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 communicate and provide 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 create a form using several different form elements for developmental practice. Form design best practices and principles are demonstrated. The activity will prepare you to design and develop a form for the project.
The following videos provide important information and examples about form design principles that emphasize user interaction and experience. Watch all videos in the series, and feel free to adjust the playback speed as needed.
In the third video, download the compressed start file (in zip format) and 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 on Web Form Design