Lesson 08 / Forms
HTML Forms: Building Interactive User Interfaces
Use HTML form elements, input types, attributes, and accessibility practices to create user-friendly interactive interfaces.
Teacher Notes / In-Class Use
Demo Live
- Use the form lab to toggle labels, required fields, errors, and confirmation behavior one at a time.
- Show how a label connects to an input through matching for and id values.
Try In Class
- Have students build a small contact form with labels, inputs, a textarea, and a submit button.
- Ask students to tab through the form and say each field purpose out loud.
Submit Or Check
- Every input should have a visible label connected with for and id.
- The form should point to a confirmation page since server-side processing is outside the class scope.
Watch For
- Labels that look right visually but are not programmatically connected to inputs.
- Placeholder text being used as the only label.
Learning Goals
- Understand the form element as the container for form controls
- Use input, textarea, select, option, label, and common form attributes
- Create accessible forms with labels, instructions, keyboard support, and clear submission behavior
Interactive Demo
How to use this demo.
Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.
What To Try
- Toggle each form quality option on and off one at a time.
- Tab through the preview after changing the label, required field, and error settings.
What Changes
- The preview form, checklist, and code sample update together.
- Missing labels and weak feedback become visible as accessibility and usability issues.
What To Notice
- A form can look correct while still being hard to use with assistive technology.
- Labels, requirements, and errors need to be communicated in markup, not only visually.
Apply It
- Review one form in your project and confirm every input has a connected label.
Interactive Demo
Form Accessibility Lab
Toggle form details on and off to see how small markup choices change usability, validation, and screen reader support.
- Label: Pass
- Required state: Pass
- Error message: Pass
- Submission target: Pass
<form action="thank-you.html" method="get">
<label for="name">Name</label>
<input id="name" name="name" required aria-describedby="name-error">
<p id="name-error">Enter your name before submitting.</p>
<button type="submit">Submit form</button>
</form>What to notice
- Placeholder text is not a replacement for a visible label.
- Required fields should be communicated in code and visually.
- Error messages need to be associated with the field they describe.
Try this
- Turn off the label and explain what information disappears.
- Submit with an empty name field and watch native validation respond.
- Compare the generated markup to your own project forms.
This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source (opens in a new tab).
Introduction
Forms are essential for creating interactive web experiences, allowing users to input data, submit information, and engage with your website.
This lesson delves into HTML form elements, exploring their various types, attributes, and best practices for creating user-friendly and accessible forms.
The form Element: The Container
The form element acts as a container for all form elements. It defines how the data entered by the user will be submitted to a server for processing.
<form action="/submit_form" method="post">
</form>Form Attributes
- action: Specifies the URL where the form data will be sent.
- method: Defines the HTTP method used to send the data, such as get or post.
- enctype: Specifies how the form data should be encoded when submitted.
- target: Specifies where to display the response after form submission.
Input Elements: Gathering User Data
The input element is the most versatile form element, used for various types of user input.
Text Input
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required placeholder="Enter your first name" autocomplete="given-name" autofocus>Password Input
<label for="password">Password:</label>
<input type="password" id="password" name="password" required placeholder="Enter your password">Email Input
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required placeholder="Enter your email" autocomplete="email">Checkbox Input
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms and conditions.</label>Other Form Elements
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="5" cols="40" placeholder="Enter your comments here"></textarea>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>Accessibility Considerations
- Use label elements for every form field.
- Provide clear instructions and error messages.
- Use ARIA attributes to enhance accessibility.
- Ensure keyboard navigation and focus management.
Form Submission
When a form is submitted, data is sent to the server. Since this class doesn't cover server-side languages, forms should point to a confirmation page like thank-you.html.
Demos
- Demo 1: User Registration Form
- Demo 2: Product Feedback Form
Checkpoint
Before moving on, make sure these feel true.
- I can build a form with labels connected to inputs.
- I can choose useful input types and attributes.
- I can test the form with a keyboard before styling it.
Project Connection
This lesson supports current class projects.
Practice
- Build a user registration form with text, password, email, and checkbox inputs.
- Build a product feedback form with a textarea and select menu.
- Point your form action to a thank-you.html confirmation page.
- Check that every form field has a label.