HTML Forms

Syntax

<form action="/submit" method="POST">
  <label for="field">Label:</label>
  <input type="text" id="field" name="field">
  <button type="submit">Submit</button>
</form>

Examples

<form>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Check email</button>
</form>

<form action="/contact" method="POST">
  <div>
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" placeholder="John Doe" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="john@example.com" required>
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" placeholder="Your message..."></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

<form action="/login" method="POST">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" autocomplete="username" required>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" autocomplete="current-password" required>
  </div>
  <div>
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Remember me</label>
  </div>
  <button type="submit">Log In</button>
  <a href="/forgot-password">Forgot password?</a>
</form>

<form action="/register" method="POST">
  <fieldset>
    <legend>Personal Info</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" required>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" required>
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required>
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="reg-email">Email:</label>
    <input type="email" id="reg-email" name="email" required>
    <label for="reg-pass">Password:</label>
    <input type="password" id="reg-pass" name="password" minlength="8" required>
    <label for="confirm-pass">Confirm Password:</label>
    <input type="password" id="confirm-pass" name="confirm_password" required>
  </fieldset>
  <button type="submit">Create Account</button>
</form>

Best practices

• Always associate labels with inputs using matching for and id attributes
• Use the appropriate input type (email, tel, date) to trigger correct mobile keyboards
• Include the required attribute on mandatory fields and validate both client and server side
• Group related form controls with fieldset and legend elements
• Use autocomplete attributes to help browsers autofill common fields
• Provide clear error messages and visual feedback when validation fails

At a glance

Purpose

Structure and meaning for web content

File extension

.html · .htm

Runs in

Web browsers

Usually used with

CSS and JavaScript

In plain English

A form groups controls into named values that can be sent together. Labels tell people what to enter; name attributes tell the receiving application what each value means.

What you’ll learn

• Connect labels to controls.
• Understand name, action and method.
• Separate browser validation from server validation.

Before you start: HTML

Breaking down the syntax

action

The URL that receives a submission.

method

GET puts values in the URL; POST sends them in the request body.

name

Identifies a successful control in submitted form data.

for / id

Connect a visible label to its control.

How it works

Label

The user understands the requested value.

Input

The browser collects values and can check constraints.

Submit

The receiving server must validate the submitted data again.

When should I use this?

Use a form to collect and submit input, including searches, preferences and sign-in details.

Common mistakes

An input without a name

An id helps connect the label, but does not name the submitted value.

Incorrect

<input id="email" type="email">

Corrected

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

Compare approaches

• GET: Read-only searches and URLs users can bookmark.
• POST: Submitting changes or data that should not be placed in a URL. HTTPS is still needed.

Accessibility

• Keep visible labels; placeholders are hints, not replacements.
• Explain errors in text and connect them to the relevant controls.
• Group related choices with fieldset and legend.

Explore deeper

Browser checks are a convenience

required and type="email" help users catch mistakes but can be bypassed. Validate input and permissions on the server. Never put passwords in a GET query.

Specifications & further reading

• WHATWG: forms

Related HTML documentation