Form Basics

Introduction

Forms let users send information: login credentials, search keywords, checkout details, feedback, and profile settings. HTML provides the structure for those controls. This chapter explains <form>, action, method, labels, common controls, and what happens when a user submits a form.

Prerequisites

• Tables
• Links and navigation
• A local preview server such as Live Server

The <form> Element

A form groups controls that should be submitted together:

<form action="/contact" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
 
  <button type="submit">Send</button>
</form>

Important attributes:

If action is omitted, the form submits to the current page URL. That can be useful in demos, but real forms should be explicit.

GET vs POST

GET

GET appends form data to the URL query string:

<form action="/search" method="get">
  <label for="q">Search</label>
  <input id="q" name="q" type="search">
  <button type="submit">Search</button>
</form>

Submitting html forms creates a URL like:

/search?q=html+forms

Use GET for:

• search
• filters
• sorting
• shareable result pages

Do not use GET for passwords or sensitive data because values appear in the URL, browser history, and logs.

POST

POST sends form data in the request body:

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
 
  <button type="submit">Create account</button>
</form>

Use POST for:

• login
• signup
• checkout
• feedback
• creating or updating records

name Is What Gets Submitted

The id connects labels and scripts. The name becomes the submitted field key.

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

Submitted data:

email=user@example.com

If an input has no name, its value is usually not included in form submission.

Labels

Every form control should have a label:

<label for="username">Username</label>
<input id="username" name="username" type="text">

The for value must match the input id. Benefits:

• clicking the label focuses the control
• screen readers announce the control name
• larger click target on mobile

You can also wrap the control:

<label>
  Username
  <input name="username" type="text">
</label>

Both patterns work. The explicit for/id pattern is easier for complex layouts.

Text Inputs

Single-line input:

<label for="full-name">Full name</label>
<input id="full-name" name="fullName" type="text">

Multi-line input:

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5"></textarea>

<textarea> has opening and closing tags. Its initial value goes between them:

<textarea name="notes">Initial notes</textarea>

Select Menus

<label for="plan">Plan</label>
<select id="plan" name="plan">
  <option value="">Choose a plan</option>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="team">Team</option>
</select>

The submitted value is the selected option's value, not necessarily the visible text.

Group options with <optgroup>:

<select id="country" name="country">
  <optgroup label="Asia">
    <option value="cn">China</option>
    <option value="jp">Japan</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
</select>

Buttons

Use real buttons for form actions:

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Preview</button>

Set type explicitly. Inside a form, <button> defaults to submit, which can surprise you.

Complete Contact Form

This form will try to submit to /contact. If your local server has no backend route, you may see a 404. That is expected. HTML defines the form; a server or JavaScript handler processes it.

What Happens on Submit?

When the user clicks a submit button:

1. The browser checks built-in validation rules.
2. The browser collects controls with name attributes.
3. The browser encodes the data.
4. The browser sends a request to action using method.
5. The server returns a response.

JavaScript can intercept this process later with a submit event, but plain HTML submission is still the foundation.

Common Mistakes

Missing labels

<!-- Avoid -->
<input name="email" type="email" placeholder="Email">

Placeholder is not a label. Use:

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

Missing name

<!-- Value will not be submitted reliably -->
<input id="email" type="email">

Add name:

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

Using links as submit buttons

<!-- Avoid -->
<a href="#" class="button">Submit</a>

Use:

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

Mini Exercise

Create contact.html with:

1. A form using method="post"
2. Name, email, topic, and message fields
3. A label for every control
4. A submit button with explicit type="submit"
5. DevTools Network open while you submit, so you can see the request attempt

FAQ

Can a page have more than one form?

Yes. Login, newsletter signup, and search can all be separate forms on one page. Keep each form focused on one task.

Should I use <input> or <button> for submit?

Prefer <button type="submit">. It can contain text and inline elements, and it is easier to style.

Does HTML store submitted data?

No. HTML only describes controls and submission. A server, API, or JavaScript handler must receive and store the data.

Is placeholder enough instead of label?

No. Placeholder disappears as users type and may not be announced consistently by assistive technology. Use a real label.

What comes next?

Input types and form attributes — choose the right controls and attributes for better mobile keyboards, validation, and data submission.