HTML: Form Tag

By Xah Lee. Date: 2026-08-21.

2026-08-20

explain html form tag

ai answer

The HTML <form> tag creates a container for interactive controls that collect user input and submit it to a server (or process it client-side).

Purpose

It groups form controls (text fields, checkboxes, radio buttons, dropdowns, buttons, etc.) so their data can be sent together when the user submits the form.

Basic Syntax

<form action="/submit" method="post">
  <!-- form controls go here -->
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Important Attributes

Attribute	Description	Common Values / Notes
`action`	URL where the form data is sent	Relative or absolute URL
`method`	HTTP method used to send the data	`get` (default) or `post`
`enctype`	How the data is encoded when using `method="post"`	`application/x-www-form-urlencoded` (default), `multipart/form-data` (for file uploads), `text/plain`
`name`	Name of the form (useful for JavaScript)	Any string
`target`	Where to display the response after submission	`_self`, `_blank`, `_parent`, `_top`, or a frame name
`autocomplete`	Whether the browser can autofill the form	`on` or `off`
`novalidate`	Disables built-in HTML5 form validation	Boolean attribute

How It Works

User fills in the controls inside the <form>.
User clicks a submit button (<button type="submit"> or <input type="submit">).
The browser collects all controls that have a name attribute.
It sends the data to the URL specified in action using the chosen method.

GET: Data is appended to the URL as a query string (?name=value&...). Visible in the address bar, limited length, not suitable for sensitive data.
POST: Data is sent in the request body. Better for larger amounts of data or sensitive information.

Common Child Elements

<input> (text, password, email, checkbox, radio, file, etc.)
<textarea>
<select> + <option>
<button>
<label> (for accessibility)
<fieldset> + <legend> (for grouping)

Simple Example

<form action="/login" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Log in</button>
</form>

Quick Tips

Always give form controls a name attribute — only named controls are submitted.
Use label elements linked with for/id for better accessibility and usability.
Prefer POST for anything that changes data or contains sensitive information.
HTML5 provides built-in validation (required, type="email", pattern, etc.) that you can enhance or override with JavaScript.

That's the core of the <form> element. Let me know if you want examples with specific input types, validation, or JavaScript handling!