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
Course Learning Outcomes
- Develop responsive web pages that follow best practices and use valid HTML and CSS.
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 video 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.
- 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