WDD 230 - Web Frontend Development I

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.

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.

This 🎦 WATCH 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.

Submission

  1. Update your course home page with a link to your form developed from the tutorial.
  2. Commit and push your updates and additions to your wdd230 GitHub Pages enabled repository.