<form> - The Form Element

The `<form>` Element

Form Container HTML 2.0

The form element creates an interactive container for collecting user input and submitting data to a server. It groups form controls like inputs, buttons, and text areas together.

Quick Example

<form 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>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form 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>

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

Syntax

<form action="url" method="get|post">
  <!-- Form controls go here -->
</form>

The action attribute specifies where to send form data, and method determines how to send it.

Attributes

Core Attributes

Attribute	Description	Values
`action`	URL where form data is sent	URL or empty string
`method`	HTTP method for submission	`get`, `post`, `dialog`
`enctype`	How form data is encoded	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`
`name`	Name of the form	String
`target`	Where to display response	`_self`, `_blank`, `_parent`, `_top`

Validation Attributes

Attribute	Description	Values
`novalidate`	Disable HTML5 validation	Boolean
`autocomplete`	Enable/disable autocomplete	`on`, `off`

Less Common Attributes

Attribute	Description	Values
`accept-charset`	Character encodings to use	Character set
`rel`	Relationship between document and linked resource	`noopener`, `noreferrer`, etc.

Common Use Cases

Basic Form with GET Method

GET sends data in the URL (suitable for searches):

<form action="/search" method="get">
<label for="query">Search:</label>
<input type="text" id="query" name="q" placeholder="Enter search term">
<button type="submit">Search</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/search" method="get">
<label for="query">Search:</label>
<input type="text" id="query" name="q" placeholder="Enter search term">
<button type="submit">Search</button>
</form>

Form with POST Method

POST sends data in the request body (suitable for sensitive data):

<form action="/login" 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>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/login" 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>

File Upload Form

Use multipart/form-data for file uploads:

<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

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

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

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

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

Form with Autocomplete Disabled

<form action="/sensitive" method="post" autocomplete="off">
<label for="otp">One-Time Password:</label>
<input type="text" id="otp" name="otp" autocomplete="off">

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/sensitive" method="post" autocomplete="off">
<label for="otp">One-Time Password:</label>
<input type="text" id="otp" name="otp" autocomplete="off">

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

Form Opening in New Tab

<form action="/results" method="get" target="_blank">
<label for="report">Generate Report:</label>
<select id="report" name="type">
  <option value="summary">Summary</option>
  <option value="detailed">Detailed</option>
</select>

<button type="submit">Open Report</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/results" method="get" target="_blank">
<label for="report">Generate Report:</label>
<select id="report" name="type">
  <option value="summary">Summary</option>
  <option value="detailed">Detailed</option>
</select>

<button type="submit">Open Report</button>
</form>

Form with No Validation

Bypass HTML5 validation (use server-side validation instead):

<form action="/submit" method="post" novalidate>
<label for="custom">Custom Field:</label>
<input type="email" id="custom" name="custom">

<button type="submit">Submit (No Validation)</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post" novalidate>
<label for="custom">Custom Field:</label>
<input type="email" id="custom" name="custom">

<button type="submit">Submit (No Validation)</button>
</form>

Form Validation

Built-in HTML5 Validation

Forms automatically validate before submission:

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

<label for="age">Age (18-100):</label>
<input type="number" id="age" name="age" min="18" max="100" required>

<label for="website">Website (URL format):</label>
<input type="url" id="website" name="website">

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

<label for="age">Age (18-100):</label>
<input type="number" id="age" name="age" min="18" max="100" required>

<label for="website">Website (URL format):</label>
<input type="url" id="website" name="website">

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

Custom Validation Messages

Use JavaScript to customize validation messages:

<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
       pattern="[a-zA-Z0-9]{3,}" required>

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

<script>
const input = document.getElementById('username');
input.addEventListener('invalid', (e) => {
  e.target.setCustomValidity('Username must be at least 3 alphanumeric characters');
});
input.addEventListener('input', (e) => {
  e.target.setCustomValidity('');
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
       pattern="[a-zA-Z0-9]{3,}" required>

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

<script>
const input = document.getElementById('username');
input.addEventListener('invalid', (e) => {
  e.target.setCustomValidity('Username must be at least 3 alphanumeric characters');
});
input.addEventListener('input', (e) => {
  e.target.setCustomValidity('');
});
</script>

JavaScript Form Handling

Preventing Default Submission

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

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

<div id="result"></div>

<script>
document.getElementById('myForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const name = formData.get('name');
  document.getElementById('result').textContent = `Hello, ${name}!`;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

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

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

<div id="result"></div>

<script>
document.getElementById('myForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const name = formData.get('name');
  document.getElementById('result').textContent = `Hello, ${name}!`;
});
</script>

Accessing Form Data

<form id="contactForm">
<input type="text" name="firstName" value="John" required>
<input type="text" name="lastName" value="Doe" required>
<input type="email" name="email" value="john@example.com" required>
<button type="button" onclick="showData()">Show Data</button>
</form>

<pre id="output"></pre>

<script>
function showData() {
  const form = document.getElementById('contactForm');
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  document.getElementById('output').textContent = JSON.stringify(data, null, 2);
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form id="contactForm">
<input type="text" name="firstName" value="John" required>
<input type="text" name="lastName" value="Doe" required>
<input type="email" name="email" value="john@example.com" required>
<button type="button" onclick="showData()">Show Data</button>
</form>

<pre id="output"></pre>

<script>
function showData() {
  const form = document.getElementById('contactForm');
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  document.getElementById('output').textContent = JSON.stringify(data, null, 2);
}
</script>

Accessibility

Always Use Labels

Every form control needs an associated label:

Good
Avoid

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

<form action="/submit" method="post">
  Email: <input type="email" name="email" required>
</form>

Use <fieldset> and <legend> for logical grouping:

<form action="/submit" method="post">
<fieldset>
  <legend>Personal Information</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>
</fieldset>

<fieldset>
  <legend>Contact Details</legend>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
</fieldset>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<fieldset>
  <legend>Personal Information</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>
</fieldset>

<fieldset>
  <legend>Contact Details</legend>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
</fieldset>

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

Provide Clear Error Messages

<form action="/submit" method="post">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       aria-describedby="phone-format" required>
<small id="phone-format">Format: 123-456-7890</small>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       aria-describedby="phone-format" required>
<small id="phone-format">Format: 123-456-7890</small>

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

Forms should be fully navigable by keyboard. Use proper HTML elements and avoid custom controls when possible.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support (limited HTML5 validation in IE9-)

The <form> element has been supported since the earliest browsers. HTML5 validation features require modern browsers.

Creates various types of form input controls. Learn more →

Associates descriptive text with form controls. Learn more →

Groups related form controls together. Learn more →

<form> - The Form Element

The `<form>` Element

Quick Example

Syntax

Attributes

Core Attributes

Validation Attributes

Less Common Attributes

Common Use Cases

Basic Form with GET Method

Form with POST Method

File Upload Form

Form with Autocomplete Disabled

Form Opening in New Tab

Form with No Validation

Form Validation

Built-in HTML5 Validation

Custom Validation Messages

JavaScript Form Handling

Preventing Default Submission

Accessing Form Data

Accessibility

Always Use Labels

Provide Clear Error Messages

Keyboard Navigation

Browser Support

Specifications

<form> - The Form Element

The <form> Element

Quick Example

Syntax

Attributes

Core Attributes

Validation Attributes

Less Common Attributes

Common Use Cases

Basic Form with GET Method

Form with POST Method

File Upload Form

Form with Autocomplete Disabled

Form Opening in New Tab

Form with No Validation

Form Validation

Built-in HTML5 Validation

Custom Validation Messages

JavaScript Form Handling

Preventing Default Submission

Accessing Form Data

Accessibility

Always Use Labels

Group Related Fields

Provide Clear Error Messages

Keyboard Navigation

Browser Support

Related Elements

Specifications

The `<form>` Element