<form>

<form> groups controls whose data can be submitted. Its action chooses the destination and its method chooses how to submit. Ordinary form submission supports get and post; dialog has a different purpose inside a dialog. put and delete are not native form method values.

A search form

<form action="https://example.com/search" method="get" role="search">
  <label for="query">Search the catalog</label>
  <input id="query" type="search" name="q" required />
  <button type="submit">Search</button>
</form>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

Try submitting without a query. Native validation prevents submission. A valid query would be encoded in the destination’s query string under q; this site’s sandbox blocks the final navigation and submission. Use sample data, not personal details.

Method, encoding, and control names

get is the default and is appropriate for retrieving a result such as a search. post sends data in the request body. It still needs HTTPS and a server that handles the request. A form does not create a backend endpoint.

Most successful controls contribute a name/value pair. Disabled controls are not submitted; unchecked checkboxes are not submitted either. A field’s id connects its label, while its name identifies submitted data.

For file uploads, use method="post" and enctype="multipart/form-data". An accept attribute on the file input suggests types but is not server-side validation.

A contact form with validation

<form action="https://example.com/contact" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="3" required></textarea>
  <button type="submit">Send message</button>
</form>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

The example destination is a placeholder, not a working service. Native validation checks the required fields and the email syntax. It cannot establish that an address exists or that a request is safe.

Accessibility and common mistakes

Use visible labels, group related controls with fieldset and legend, and make errors explain how to recover. Preserve keyboard focus and the person’s input after an error.

Do not nest forms. novalidate disables automatic constraint validation during submission; use it only when you provide the required validation and accessible feedback yourself. Do not put comments inside an opening tag: comments belong between elements. Give non-submit actions type=”button”.

Sources and browser support

MDN: form describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.