HTML Forms

Forms are one of the most important features of modern websites. They allow users to enter information and send it to a website or application.

You interact with forms almost every day when you:

• Sign up for a new account
• Log in to a website
• Submit a contact form
• Search for products
• Place an online order

HTML provides the tools needed to create these forms and collect user input.

What Is an HTML Form?

An HTML form is a section of a webpage that contains input fields where users can enter information.

Forms are created using the form element.

<form>
    <input type="text" />
    <button>Submit</button>
</form>

In this example:

• The form element acts as a container.
• The input element allows users to enter data.
• The button element submits the form.

Why Are Forms Important?

Forms help websites communicate with users.

For example, when you create an account on a website, the form collects information such as:

• Name
• Email address
• Password

The website then processes this information and creates your account.

Without forms, websites would not be able to collect user data.

Basic Form Structure

A simple contact form might look like this:

<form>
    <label>Name:</label>
    <input type="text" />

    <br /><br />

    <label>Email:</label>
    <input type="email" />

    <br /><br />

    <button>Submit</button>
</form>

This form allows users to enter their name and email address before submitting the information.

Submit Button

Used to send form data.

<button type="submit">
    Submit
</button>

When clicked, the form is submitted.

The Label Element

Labels help users understand what information they should enter.

<label>Email Address:</label>
<input type="email" />

Using labels makes forms easier to use and improves accessibility.

The Select Element

The select element creates a dropdown list. Connect it to a label and give it a name so its selected value is included when the form is submitted.

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">Choose a country</option>
    <option value="india">India</option>
    <option value="canada">Canada</option>
</select>

The Option Element

Each option element represents one choice inside a select element. The text is shown to the user, while the value attribute is sent with the form.

<option value="html">HTML</option>
<option value="css" selected>CSS</option>
<option value="javascript">JavaScript</option>

• The selected attribute makes an option the default choice.
• The disabled attribute prevents an option from being selected.

The Optgroup Element

The optgroup element organizes related options under a visible label. This makes a long dropdown easier to scan.

<label for="course">Choose a course:</label>
<select id="course" name="course">
    <optgroup label="Frontend">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
    </optgroup>
    <optgroup label="Programming">
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
    </optgroup>
</select>

The label attribute names each group. An optgroup groups choices but cannot be selected itself.

The Textarea Element

The textarea element collects longer, multi-line text such as comments, feedback, messages, and descriptions. Unlike input, it uses an opening and closing tag.

<label for="message">Message:</label>
<textarea
    id="message"
    name="message"
    rows="5"
    cols="40"
    placeholder="Write your message">
</textarea>

Connect textarea to a label, give it a name for form submission, and use rows to provide a comfortable starting height.

The Fieldset and Legend Elements

The fieldset element groups related form controls. Its legend element provides a visible and accessible name for that group.

<fieldset>
    <legend>Preferred contact method</legend>
    <label>
        <input type="radio" name="contact" value="email" />
        Email
    </label>
    <label>
        <input type="radio" name="contact" value="phone" />
        Phone
    </label>
</fieldset>

Fieldset and legend are especially helpful for groups of radio buttons and checkboxes because screen readers announce the group's purpose.

Form Attributes

The form element often uses attributes such as:

<form action="/submit" method="post">

• The action attribute specifies where the data should be sent.
• The method attribute specifies how the data should be sent.

These attributes become more important when connecting forms to servers and databases.

Best Practices

When creating forms:

• Always use clear labels.
• Keep forms simple and easy to understand.
• Group related fields together.
• Use fieldset and legend for related radio buttons or checkboxes.
• Use textarea when users need to enter multiple lines of text.
• Use appropriate input types.
• Provide a submit button.

Good forms help users complete tasks quickly and accurately.

Key Takeaways

• Forms is an important topic to understand.
• Start with small examples and practice one step at a time.
• Use the idea in simple projects so it becomes easier to remember.