Building HTML Forms with Diverse Input Types

Hello! Welcome back to your front-end programming course.

In our last lesson, we focused on how to embed visual content using the <img> element, paying close attention to accessibility with the alt attribute and performance with width and height. You learned how to make images a meaningful part of your page's structure.

Today, we shift from displaying content to collecting it. This lesson addresses the learning outcome: Create HTML forms with various input types including text, email, password, checkbox, and radio buttons.

Forms are the primary way users interact with a website, from logging in and searching to providing feedback or making a purchase. As a UI/UX designer, you've spent countless hours designing these interactions. Now, you'll learn to build their HTML foundation.

Let's look at a typical sign-up form. It's a great example of the different kinds of user input we'll learn to create today.

1. The Foundation: <form>, <label>, and <input>

Every form starts with the <form> element. It acts as a container for all the form fields, which are often called "controls." The <form> tag itself has two crucial attributes:

• action: The URL where the collected data should be sent for processing (usually a server-side script).
• method: The HTTP method to use when submitting the data (most commonly GET or POST).

We won't dive deep into server-side processing now, but it's important to know that these attributes define what happens when a user hits "Submit."

Inside the form, the most common elements are <label> and <input>.

• The <input> element is where the user enters data.
• The <label> element provides a caption for the <input>.

For usability and accessibility, it is essential to connect a <label> to its corresponding <input>. You do this by giving the <input> an id attribute and giving the <label> a for attribute with the exact same value. This creates a connection that:

1. Allows screen readers to announce the label when the user focuses on the input.
2. Lets users click on the label to activate the input field, increasing the clickable target area—a key usability principle.

Let's watch a short video that demonstrates how these foundational pieces fit together.

2. Gathering Information: Common Input Types

The <input> element is incredibly versatile. Its behavior changes based on its type attribute. Let's explore the most common types you'll use.

Text, Password, and Email Inputs

These are the workhorses of most forms.

• <input type="text">: A single-line plain text field. This is the default if no type is specified.
• <input type="password">: Similar to a text field, but it masks the characters as the user types.
• <input type="email">: Designed specifically for email addresses. On mobile devices, it brings up a keyboard with the "@" symbol. Modern browsers will also perform basic validation to check if the entry looks like an email address.

The video you watched earlier also demonstrates some very useful attributes for these inputs, such as:

• name: This is critical. The name is sent to the server along with the user's data, acting as the key for the value entered. An input without a name will not have its data submitted.
• placeholder: Provides a short hint within the input field (e.g., "Enter your full name"). This is a UI pattern you are likely very familiar with.
• required: A boolean attribute that tells the browser the field must be filled out before the form can be submitted.

Let's see how to create a password field.

Making Choices: Radio Buttons and Checkboxes

When you need users to select from a predefined set of options, radio buttons and checkboxes are the standard tools.

• Radio Buttons (<input type="radio">): Used when a user must select only one option from a group (e.g., "Yes" or "No"). To group radio buttons together, they must all share the same name attribute. Each option needs its own value attribute, which is the data that gets submitted.

• Checkboxes (<input type="checkbox">): Used when a user can select zero or more options from a group (e.g., "Select your interests").

The distinction is fundamental to good UX: use radio buttons for mutually exclusive choices and checkboxes for multiple, non-exclusive selections.

3. Organizing and Submitting a Form

A well-organized form is easier for users to understand and complete. As a designer, you create visual groupings in your mockups. In HTML, we use the <fieldset> and <legend> elements to create semantic groupings.

• <fieldset>: Wraps a group of related form controls.
• <legend>: Provides a caption for the <fieldset>.

This structure is not just for visual organization (browsers typically draw a box around a fieldset); it also helps screen reader users understand the context of each group of controls.

Finally, a form isn't complete without a way to submit it. This is done with a submit button. You can create one using <input type="submit"> or, more flexibly, with <button type="submit">.

4. Practice: Build a Contact Form

Now it's your turn to apply these concepts. Your task is to create a simple contact form.

Instructions:

1. Create a form that submits to "/contact-us".
2. Add a fieldset with the legend "Contact Us".
3. Inside the fieldset, include the following labeled inputs:
   • A required text input for "Name".
   • A required email input for "Email".
   • A group of radio buttons for "Inquiry Type" with the options "General", "Support", and "Feedback". Ensure only one can be selected.
   • A checkbox for "I agree to the terms."
4. Add a submit button with the text "Send Message".
5. Make sure every input has a label correctly associated with it and a name attribute.

Starter Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
</head>
<body>

    <!-- Your form code goes here -->

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
</head>
<body>

    <form action="/contact-us" method="post">
        <fieldset>
            <legend>Contact Us</legend>

            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="user_name" required>
            </div>

            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="user_email" required>
            </div>

            <div>
                <p>Inquiry Type:</p>
                <input type="radio" id="general" name="inquiry_type" value="general" checked>
                <label for="general">General</label><br>
                <input type="radio" id="support" name="inquiry_type" value="support">
                <label for="support">Support</label><br>
                <input type="radio" id="feedback" name="inquiry_type" value="feedback">
                <label for="feedback">Feedback</label>
            </div>
            
            <div>
                <input type="checkbox" id="terms" name="agree_terms" required>
                <label for="terms">I agree to the terms.</label>
            </div>

        </fieldset>

        <button type="submit">Send Message</button>
    </form>

</body>
</html>

Conclusion

Great job! You've just learned how to build one of the most fundamental components of the interactive web. You can now create structured, accessible forms to gather various types of user input.

Key Takeaways:

• The <form> element is the container for all input controls.
• The <input> element's type attribute determines its function: text, email, password, checkbox, and radio are core types.
• Always use a <label> with a for attribute that matches the id of its <input> for accessibility and usability.
• The name attribute is essential for ensuring an input's data is submitted.
• Radio buttons must share a name to create a single-choice group.
• <fieldset> and <legend> provide semantic structure for grouping related controls.

In our next lesson, we'll explore another way to structure complex data, but this time for display rather than input. We will learn how to structure tabular data using <table> and its related elements, which is perfect for things like pricing comparisons, feature lists, or user data dashboards.