Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 2

Accessible Forms: Input Types and Labels

Recommended resources

In our last lesson, we focused on building a strong foundation for your web pages using semantic HTML elements like <header>, <main>, and <footer>. This practice of using tags that describe their content is not just for page layout; it's a core principle we'll now extend to one of the most interactive parts of the web: forms.

As a QA engineer, you know that a product's quality is defined by its usability and robustness for all users. A form that is confusing or breaks for someone using a screen reader is a buggy form. In this lesson, we will cover how to build accessible and user-friendly forms. You'll learn to select the right input types for the data you need and, most importantly, how to correctly label them so they are understandable to everyone.

By the end of this lesson, you will be able to create accessible forms using a variety of input types and their corresponding labels, a fundamental skill for building the polished landing pages and web apps you're aiming for.

Why Accessible Forms Matter

Forms are the primary way you'll collect information from users, whether it's for a simple contact form, a user registration, or a complex application interface. A well-crafted form is intuitive and easy to use. A poorly crafted one is a major source of user frustration.

This image shows a clean, well-structured shipping address form. Notice how each input field has a clear, corresponding label. This is the foundation of an accessible and user-friendly form.

The absolute cornerstone of an accessible form is the proper use of the <label> element. Simply placing text next to an input field is not enough. To understand why, let's turn to the excellent MDN Web Docs.

MDN Web Docs HTML: A good basis for accessibility - Learn web development | MDN

This MDN article explains the critical role of text labels for UI controls, especially in the context of accessibility.

Read the section titled Use meaningful text labels. Pay close attention to the "good" and "bad" examples for form labels and the explanation of how screen readers interpret them.

As you've just read, explicitly associating a <label> with an <input> using the for and id attributes does two crucial things:

  1. It tells assistive technologies, like screen readers, exactly which label belongs to which input, so the user gets the right context.
  2. It increases the clickable area for all users, improving usability on both desktop and mobile devices.

This is a simple technique with a massive impact on quality. From a QA perspective, a form without correctly associated labels is a form that fails a primary accessibility test.

Building a Form: The Essentials

Let's start building. All form content lives inside a <form> tag. This element acts as a container and has two key attributes that you, with your software engineering background, will recognize:

  • action: The URL where the form data should be sent for processing (e.g., a server-side script).
  • method: The HTTP method to use for sending the data. The two most common values are GET (appends data to the URL, for things like search) and POST (sends data in the request body, for submitting sensitive information or creating new resources).

We won't delve into the server-side processing, but it's important to understand what these attributes are for.

The Shay Howe guide provides a great overview of the fundamental form elements. We'll use it as our primary reference.

Building Forms - Learn to Code HTML & CSS

This guide provides a clear walkthrough of the elements used to construct and organize forms.

Start by reading the Initializing a Form section to get familiar with the <form> element. Then, jump to the section Organizing Form Elements. This is the most important part, as it covers <label>, <fieldset>, and <legend>, which are essential for accessibility and structure.

Choosing the Right Input for the Data

The <input> element is a chameleon. Its type attribute dictates its function and appearance, allowing you to create everything from simple text boxes to color pickers. Using the correct type is a semantic practice that brings significant benefits:

  • Better User Experience: On mobile devices, the browser can display a more appropriate keyboard (e.g., a number pad for type="number" or an email keyboard for type="email").
  • Built-in Browser Validation: Using types like email, url, or number provides a free, first layer of client-side validation.
  • Improved Accessibility: Specialized controls are often more accessible than generic text inputs.
This chart shows a variety of available HTML input types and their default appearance, from simple text fields to more complex controls like a color picker.

Let's explore the most common input types and other form controls.

Building Forms - Learn to Code HTML & CSS

This part of the guide details the most common controls for collecting user data.

Read through Text Fields to learn about the basic text input. Pay attention to the list of new HTML5 input types like email, date, and number. Next, read the sections on choice-based inputs, which cover Radio Buttons and Check Boxes. Note the key difference: radio buttons (with the same name) are for a single choice, while checkboxes allow multiple selections. Continue with Drop-Down Lists to understand the <select> and <option> elements. Finally, review the different ways to create a submit button in the Form Buttons</_tf> section.

A Practical Demonstration: Grouping Radio Buttons

One of the most common and important patterns for accessibility is grouping radio buttons. Since a user can only select one option from the group, you need a way to label the entire group. This is what <fieldset> and <legend> are for.

Kevin Powell provides a fantastic, clear demonstration of how to implement this correctly.

A deceptively complex form / HTML & CSS / Frontend Mentor

This video shows how to semantically group related inputs, which is crucial for radio buttons.

Watch the segment from this discussion on radio buttons. He explains why a simple <label> isn't sufficient for a group of radio buttons and expertly demonstrates how <fieldset> acts as the container and <legend> provides the overall question or label for the group. Notice how all the radio buttons share the same name attribute.

Essential Attributes for Function and Usability

Beyond type and id, a few other attributes are critical for creating functional forms.

  • name: This is the key that gets sent to the server with the input's value. Without a name, the data from that input will not be submitted.
  • value: For text inputs, this pre-fills the field. For radio and checkbox inputs, this is the actual data that is submitted if that option is selected. It's easy to forget but absolutely vital.
  • placeholder: Provides a short hint within the input field (e.g., "example@email.com"). It is not a substitute for a <label>.
  • required: A boolean attribute that tells the browser not to submit the form unless this field is filled out. This provides simple, instant validation.

The "Building Forms" guide has a concise reference for these.

Building Forms - Learn to Code HTML & CSS

This section covers additional attributes that enhance form functionality and user experience.

Quickly read through the descriptions for Placeholder and Required.

In Practice: Building a Registration Form

Now, let's apply everything you've learned. The best way to solidify these concepts is to build something. We will follow the hands-on example from the Shay Howe guide to create a complete registration form.

This exercise will bring together everything: the main <form> element, various <input> types, proper use of <label>, a <select> dropdown, a <textarea>, and the required attribute.

Building Forms - Learn to Code HTML & CSS

This is a step-by-step tutorial to build a complete, accessible registration form from scratch. This is your main hands-on activity for this lesson.

Follow the instructions in the "In Practice" section. The goal here is to focus on the HTML structure of the form. Open your code editor and build the form as described. Pay close attention to how each input is paired with a label, how specific input types (text, email) are used, and how attributes like placeholder and required are applied. You can skip the CSS parts for now; we'll cover styling in great detail in later lessons. The key is to produce the correct, semantic HTML markup.

Conclusion

In this lesson, you've moved from static page structure to the interactive building blocks of the web. You've seen that building a high-quality form is about much more than just placing input fields on a page; it's about making deliberate, semantic choices that ensure the form is usable, accessible, and robust.

Here are the key takeaways:

  • The <label> is non-negotiable: Always associate a <label> with its form control using the for and id attributes for accessibility and improved usability.
  • Use the right tool for the job: Choose the semantic <input> type (e.g., email, number, date) that matches the data you're collecting. This provides a better user experience and free validation.
  • Group related controls: Use <fieldset> with a <legend> to semantically group related items, especially radio buttons.
  • Attributes are key: Remember to use name for data submission, value to specify the data for radio and checkbox inputs, and required for simple validation.

You now have the skills to create the structural backbone for any form. In our next lesson, we will shift our focus back to CSS and tackle a fundamental concept that will make layout work much more predictable: the box-sizing: border-box property.