HTML Forms

Beginner
14 min read
Updated: Nov 2026
6 examples
form / action / method
HTML forms tutorial — collect and submit user data with form controls
Definition

Definition and Usage

An HTML form is a section of the page that groups interactive controls so visitors can enter information and submit it—contact messages, logins, searches, surveys, and uploads.

What does a form wrap?

Inside <form> you typically place inputs, textarea, select, label, optional fieldset/legend, and a submit control (<button type="submit"> or <input type="submit">).

Where does the data go?

action is the URL that receives the submission. method chooses GET (append to the URL) or POST (send in the request body). File uploads need enctype="multipart/form-data".

Forms hub vs form tag page

This tutorial focuses on building and submitting forms on an HTML page. Attribute-level detail for the element itself lives on HTML form Tag. Control types are covered on HTML Inputs.

name + label.

Every field you want submitted needs a name. Every visible control needs a real label.

Client checks are not enough.

required and pattern help users, but always validate again on the server.

One form, one job.

Do not nest forms. Keep each <form> focused on one submission flow.

Syntax

HTML Syntax

A minimal labeled form with action and method:

HTML
<form action="/contact" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

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

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

Core HTML Concepts

Pieces that make a form work on the page:

PieceRole
<form>Container for controls and submission
actionURL that processes the data
methodget, post, or dialog
enctypeEncoding for POST (use multipart/form-data with files)
name on controlsKeys in the submitted dataset
<label>Accessible name for a control
<fieldset> / <legend>Group related controls
novalidateSkip browser validation on submit

GET vs POST

GETPOST
Data locationQuery string in the URLRequest body
Best forSearch, filters, shareable resultsCreate / update / login / upload
Side effectsShould be safe to repeatMay change server state
VisibilityVisible in address bar / historyNot in the URL

Common controls inside a form

ControlUse when
<input>Most single-value fields (see Inputs)
<textarea>Multi-line text
<select> + <option>Pick from a list
<button type="submit">Submit the form
Approach

How to Build a Form in HTML

A practical workflow:

  1. Open <form action="…" method="get|post">.
  2. Add each field with a label, id, and name.
  3. Choose suitable control types (email, password, select…).
  4. Group related choices in fieldset with a legend.
  5. Add browser hints: required, min/max, pattern.
  6. For file fields, set enctype="multipart/form-data".
  7. Finish with a submit button; handle the response on the server (or with JS + FormData).
GoalPattern
Search boxmethod="get" + text/search input
Login / contactmethod="post" + labeled fields
Upload resumePOST + enctype="multipart/form-data" + type="file"
Read values in JSnew FormData(form) on submit
Try it

Live Preview

Fill the mini form and submit. Submission is intercepted so you can see the would-be payload.

Uses FormData after preventDefault()—nothing is sent to a server.

Submitted data
Waiting for submit…
Code

HTML Examples

Six patterns: basic contact form, action/POST, validation, select, fieldset, and FormData handling.

Example 1 — Basic Contact Form

HTML
<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

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

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

  <button type="submit">Submit</button>
</form>
Try It Yourself

How It Works

  1. form wraps the controls as one unit.
  2. label for matches each control id.
  3. name prepares values for submission.
  4. submit button triggers the form.

Example 2 — action + method post

HTML
<form action="/submit" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Log in</button>
</form>
Try It Yourself

How It Works

  1. action sets the destination URL.
  2. method="post" keeps credentials out of the query string.
  3. required blocks empty login attempts in the browser.
  4. password type masks the secret as it is typed.

Example 3 — Validation (required, pattern, min, max)

HTML
<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username"
    required pattern="[A-Za-z]{5,}" title="At least 5 letters">

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="100" required>

  <button type="submit">Register</button>
</form>
Try It Yourself

How It Works

  1. pattern constrains the username shape.
  2. min / max limit the age number.
  3. Browser UI shows a message if rules fail.
  4. Server checks should still repeat these rules.

Example 4 — Select Dropdown

HTML
<form>
  <label for="course">Choose a course</label>
  <select id="course" name="course" required>
    <option value="">-- Select --</option>
    <option value="html">HTML Basics</option>
    <option value="css">CSS Styling</option>
    <option value="js">JavaScript</option>
  </select>

  <label for="enroll-email">Your email</label>
  <input type="email" id="enroll-email" name="email" required>

  <button type="submit">Enroll</button>
</form>
Try It Yourself

How It Works

  1. select offers a fixed list of choices.
  2. option value is what gets submitted.
  3. Empty first option forces an explicit choice with required.
  4. email field collects contact details beside the dropdown.

Example 5 — Fieldset, Radio, and Checkbox

HTML
<form>
  <fieldset>
    <legend>Experience level</legend>
    <input type="radio" id="beginner" name="level" value="beginner">
    <label for="beginner">Beginner</label>
    <input type="radio" id="advanced" name="level" value="advanced">
    <label for="advanced">Advanced</label>
  </fieldset>

  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  <label for="newsletter">Email me updates</label>

  <button type="submit">Send survey</button>
</form>
Try It Yourself

How It Works

  1. fieldset + legend name a group of related controls.
  2. Radios share name="level" so only one is chosen.
  3. Checkbox toggles independently.
  4. Assistive tech announces the legend with the group.

Example 6 — Complete Contact Form with FormData

HTML
<form id="contactForm" action="/submit" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

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

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

<script>
  document.getElementById("contactForm").addEventListener("submit", function (e) {
    e.preventDefault();
    const data = new FormData(this);
    console.log("Name:", data.get("name"));
  });
</script>
Try It Yourself

How It Works

  1. HTML still defines action and method for real submissions.
  2. preventDefault stops navigation in a JS demo.
  3. FormData reads named fields after submit.
  4. Try It opens the full editable contact page.

Edge Cases & Pitfalls

Most form bugs are missing names, wrong methods, or nested forms.

name

Controls without name

They look fine on screen but often never appear in the submitted data.

method

POST secrets with GET

Passwords and private data must not ride in the URL. Use POST (and HTTPS).

nest

Nested <form> elements

Invalid HTML. Keep one form per submission flow.

file

File upload without multipart

Set enctype="multipart/form-data" when sending files.

a11y

Missing labels

Placeholder-only fields are hard to use with assistive tech and after typing starts.

trust

Trusting browser validation alone

Users can bypass client checks. Validate again on the server.

Compatibility

Browser Support

The form element, GET/POST submission, labels, fieldset, and built-in validation are Baseline HTML. File uploads and constraint validation work in all modern browsers.

✓ Baseline · Widely available

HTML forms

Form containers and native submission work across current browsers worldwide.

100% form element
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
HTML forms Universal

Bottom line: Wrap controls in form, set action/method, name every field, and label everything users must fill.

Remember

Key Takeaways

  • <form> groups controls for one submission.
  • action + method decide where and how data is sent.
  • label + name make fields usable and submittable.
  • Tag details on /html/tags/form; control types on /html/inputs.

One line: Wrap labeled, named controls in <form>, choose GET or POST, and submit to an action URL (or handle with script).

Frequently Asked Questions

A form is a section of a page that groups interactive controls—inputs, textareas, selects, and buttons—so users can enter data and submit it to a URL or handle it with script.
This tutorial teaches how to build and submit forms on an HTML page (action, method, labels, validation, fieldsets). The /html/tags/form page is the element reference for attributes and tag details.
Use GET for safe searches and filters (data appears in the URL). Use POST for creating or changing data, logins, and anything that should not sit in the address bar.
On submit, the browser sends name/value pairs. Without name, a control’s value is usually omitted from the submission.
required tells the browser not to submit until that field has a valid value. Combine it with type-specific checks such as email or pattern.
When the form includes a file input. That encoding lets the browser send file bytes with the rest of the fields.

Practice in the editor

Open a Try It demo and build a full contact form with validation.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML Tables HTML Inputs