LogoDropForm

How HTML Forms Work

Learn how HTML forms work, how form submission happens, and how to build forms with all common field types.

DropForm Logo
January 16, 2026 by DropForm Team

HTML forms are the standard way to collect user input on the web and send it to a server. They power contact forms, signups, checkout flows, surveys, file uploads, and admin tools.

A form is made up of:

  • A <form> element that defines where data is sent and how
  • One or more controls (inputs, selects, textareas, buttons)
  • Optional helpers for accessibility and UX (labels, fieldsets, error messages)

When a user submits a form, the browser collects the values of the form controls and sends them as an HTTP request to the URL in the form’s action.

What happens when a form is submitted?

When the user clicks a submit button (or presses Enter):

  1. The browser validates the form (if HTML validation is enabled).
  2. The browser collects values from controls that have a name.
  3. It serializes the data depending on method and enctype.
  4. It sends the request to the action URL.
  5. The server responds (often with a redirect or a page).

Important rules:

  • Only controls with a name are submitted.
  • Disabled controls (disabled) are not submitted.
  • Unchecked checkboxes/radios are not submitted.

The <form> element

Core attributes

  • action - URL that receives the submission (absolute or relative).
  • method - get or post (default is get).
  • enctype - how to encode the body (relevant for post).
  • target - where to open the response (_self, _blank, etc.).
  • autocomplete - on / off.
  • novalidate - disables built-in browser validation.

GET vs POST

GET

  • Data goes into the URL query string.
  • Good for search forms and filters.
  • Not good for sensitive data.

POST

  • Data goes in the request body.
  • Best for contact forms, logins, file uploads.

enctype values

  • application/x-www-form-urlencoded (default) - standard key=value encoding.
  • multipart/form-data - required for file uploads.
  • text/plain - rarely used.

The most important concept: name

The name attribute becomes the key in the submitted data.

If there is no name, the value is not included in the submission.

Common HTML form controls

This section is intentionally comprehensive: it lists the main controls, the tags used, the most important attributes, and examples.

<input>

<input> is the most flexible control. The behavior is determined by type.

Text-like inputs

Text

Email

Password

Search

URL

Tel

Numeric & date/time inputs

Number

Range

Date

Time

Datetime-local

Month / Week

Choice inputs

Checkbox

Radio group

Key points:

  • Radio buttons are grouped by the same name.
  • Only the selected radio is submitted.

File input

File

Multiple files

Restrict file types

Hidden input

Hidden fields are useful for passing metadata (source, campaign, etc.).

Buttons inside <input>

These are less common; most people use <button>.

<textarea>

For multi-line text.

<select>, <option> and <optgroup>

Dropdown / single-choice

Grouped options

Multiple selection

<button>

Buttons can submit, reset, or do nothing (for JS handlers).

Important: The default type for <button> is submit in forms, so it’s best to always set type.

Form grouping tags

<label>

Labels improve accessibility and UX.

Or wrapping:

<fieldset> and <legend>

Use these for grouping related controls (like a radio group).

Validation and constraints (HTML attributes)

HTML provides built-in validation. You can enhance it with server-side validation (recommended).

Common validation attributes:

  • required
  • min, max, step (number/range/date)
  • minlength, maxlength
  • pattern (regex)
  • type="email" / type="url"
  • inputmode (mobile keyboard hints)

Examples:

Disable validation:

Accessibility essentials (recommended minimum)

  • Always connect labels to inputs (for + id)
  • Use semantic grouping (fieldset + legend) for radios/checkbox sets
  • Provide error text near the field
  • Don’t rely on placeholder text as a label

A simple accessible pattern:

How form data is encoded

URL encoded (default for POST)

The request body looks like:

Multipart (file uploads)

The request body contains multiple parts, including binary file data.

For file uploads, you must use:

  • method="post"
  • enctype="multipart/form-data"
  • <input type="file">

Complete examples

A simple contact form

A signup form with validation

A file upload form

Where does form data go?

Every HTML form must submit data to a server endpoint. That endpoint can be:

  • Your own backend (Node, Spring, PHP, etc.)
  • A serverless function
  • A form backend

If you don’t want to build and host your own server, a form backend gives you an endpoint to submit data to - plus storage, validation, spam protection, notifications, and integrations.

This is where DropForm fits: