HTML Forms

Introduction

Forms are essential for creating interactive web experiences, allowing users to input data, submit information, and engage with your website.

This lesson introduces the HTML elements, attributes, labels, validation patterns, and accessibility practices that make forms usable.

Form Anatomy

A form needs a form element, labeled fields, useful name values, and a submit button.

For class projects without a backend, point the action to a confirmation page such as thank-you.html.

<form action="thank-you.html" method="get">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

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

The form Element: The Container

The form element acts as a container for form controls. It defines where the data goes and how it is sent.

<form action="thank-you.html" method="get">
</form>

Form Attributes

• action: Specifies the URL or page where the form data will be sent.
• method: Defines how the data is sent, usually get or post.
• enctype: Specifies how form data should be encoded when submitted.
• target: Specifies where to display the response after submission.

For static class projects, use action="thank-you.html" so the form leads to a confirmation page.

Labels, for, and id

Every form control should have a visible label.

The label connects to the input when the label for value matches the input id value.

• for="firstName" points to the field with id="firstName".
• Connected labels help screen reader users and make the label clickable.

<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName">

id vs. name

id and name do different jobs. Students often mix them up, so check both.

Input Elements: Gathering User Data

The input element is the most versatile form element. Its behavior changes based on the type attribute.

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>

Radio Buttons

Radio buttons let users choose one option from a group. Inputs in the same radio group share the same name.

<fieldset>
  <legend>Preferred contact method</legend>

  <input type="radio" id="contactEmail" name="contactMethod" value="email">
  <label for="contactEmail">Email</label>

  <input type="radio" id="contactPhone" name="contactMethod" value="phone">
  <label for="contactPhone">Phone</label>
</fieldset>

Grouped Controls with fieldset and legend

Use fieldset and legend to group related controls, especially checkbox and radio groups.

<fieldset>
  <legend>Interests</legend>

  <input type="checkbox" id="design" name="interests" value="design">
  <label for="design">Design</label>

  <input type="checkbox" id="code" name="interests" value="code">
  <label for="code">Code</label>
</fieldset>

textarea

Use textarea when the user needs to enter multiple lines of text.

Avoid using <br> to space form fields. Use CSS for spacing instead.

<label for="comments">Comments</label>
<textarea id="comments" name="comments" rows="5" placeholder="Enter your comments here"></textarea>

select and option

Use select and option when the user should choose from a defined list.

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Other Input Types

HTML includes input types that give browsers more information about the expected data.

Submit Buttons

A form needs a way to submit. Use a button with type="submit" for normal form submission.

• type="submit" submits the form.
• type="button" creates a button that does not submit unless JavaScript gives it behavior.

<button type="submit">Send</button>
<button type="button">Open menu</button>

Placeholders Are Not Labels

placeholder text can give an example, but it should not replace a visible label.

Placeholder text disappears when users type and can be harder to read.

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="name@example.com">

Autocomplete

autocomplete helps browsers fill common information faster and more accurately.

<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" autocomplete="given-name">

HTML Validation

HTML can provide basic validation before a form submits.

Helper Text with aria-describedby

Use helper text when a field needs instructions. Connect the helper text to the field with aria-describedby.

<label for="email">Email</label>
<p id="email-help">Use your school email address.</p>
<input id="email" name="email" type="email" aria-describedby="email-help">

Accessibility Considerations

• Use label elements for every form field.
• Provide clear instructions and error messages.
• Use native HTML first. Add ARIA only when it provides information HTML does not.
• Ensure keyboard navigation and focus management.
• Make sure focus states are visible.

Form Submission

When a form is submitted, data is sent to the location in the action attribute. Since this class doesn't cover server-side languages, forms should point to a confirmation page like thank-you.html.

If you use method="get", you can inspect the submitted values in the URL query string after submission.

Example: Contact Form

<form action="thank-you.html" method="get">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

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

Common Mistakes