HTML Forms
Overview
In WDD 130, you were introduced to the basic concepts of frontend form design. We continue the discussion and application by diving deeper into form design and development.
"The <form> HTML element represents a document section containing interactive controls for submitting information." - MDN
Prepare
Forms provide an interface for the users to communicate and provide information to the site or application. In this class, we focus on the frontend design of forms and do not work on the processing of the form inputs.
- Read: 📄 General Accessibility Guidance for Forms - designsystem.digital.gov
- Read: 📄 Learning about HTML Form Attributes - sitepoint.com
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.
This 🎦 series will provide you with important information and examples about form design principles that focuses on user interaction and experience. Do not skip any of the videos in the series. You may elect to run the videos at your desired speed.
During the third video, download the compressed start file (in zip format) and follow along in your own editor with the instructor.
- 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
Submission
- Update your course home page with a link to your form developed from the tutorial.
- Commit and push your updates and additions to your wdd230 GitHub Pages repository.