<form> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content, palpable content
Content model	Flow content, but no nested <form> elements
Tag omission	Neither the start nor end tag can be omitted
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLFormElement`

Syntax

<form action="/submit" method="post">
  ...
</form>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
action	URL the form data is sent to
method	`get` or `post` — how the data is sent
enctype	Encoding for the submitted data; use `multipart/form-data` for file uploads
autocomplete	Whether browsers may autofill fields (`on`/`off`)
novalidate	Skips the browser’s built-in validation on submit

Common examples

A newsletter signup form

The smallest useful form: one labelled field and a submit button.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

A login form with autofill hints

The autocomplete values let browsers and password managers fill the fields correctly.

<form action="/login" method="post">
  <label for="user">Email</label>
  <input id="user" name="email" type="email" autocomplete="username">
  <label for="pass">Password</label>
  <input id="pass" name="password" type="password" autocomplete="current-password">
  <button>Log in</button>
</form>

A file upload form

Uploading files needs method="post" and enctype="multipart/form-data".

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="cv">Upload your CV</label>
  <input type="file" id="cv" name="cv" accept=".pdf,.docx">
  <button>Upload</button>
</form>

GET vs POST

The method attribute decides how the form data travels. With GET, the values are added to the URL (for example /search?q=shoes), so the result can be bookmarked, shared and cached. With POST, the values are sent in the body of the request and don’t appear in the address bar or browser history.

Use GET for searches and filters, where visitors benefit from a shareable URL. Use POST for anything that changes data or contains private information: sign-ups, logins, payments, messages and file uploads. Remember that POST hides data from the URL but does not encrypt it — always serve forms over HTTPS.

	GET	POST
Where data goes	In the URL	In the request body
Bookmarkable	Yes	No
Best for	Search, filters	Logins, sign-ups, uploads

Common mistakes to avoid

Fields without a name. Only fields with a name attribute are sent when the form is submitted.
Missing labels. Placeholder text is not a label. Every field needs a <label>.
Trusting browser validation alone. required and type="email" help visitors, but anyone can bypass them, so the server must check the data too.
Sending passwords with GET. GET puts the values in the URL (and browser history); use POST for anything private.

Accessibility & SEO tips

Group related fields, such as radio buttons, in a <fieldset> with a <legend>.
Show error messages as text next to the field and link them with aria-describedby, rather than relying on red borders alone.
Use the right input types and autocomplete values: they bring up the correct mobile keyboard and save visitors typing.
Keep forms short: ask only for the information you really need. Every extra field lowers the number of people who finish the form.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. Newer input types (date, color, range) also work in all current browsers.

Tutorials: How to make a button, How to make a contact form, HTML forms tutorial

Related tags

Frequently asked questions

GET vs POST — which method should I use?

Use GET for simple, non-sensitive queries like a search, since the data appears in the URL. Use POST for anything that changes data or includes sensitive information.

How do I stop the page from reloading on submit?

Call event.preventDefault() inside a submit event listener, then handle the data yourself with JavaScript — for example, sending it with fetch().

Where does form data go when submitted?

To the URL in the action attribute, using the method you set (GET or POST). A server-side script at that URL, or a form service, receives and processes the values.

Can an HTML form send an email by itself?

Not reliably. action="mailto:…" depends on the visitor's email app and often fails. Use a server-side script or a form service that emails the submissions to you.

What does enctype do?

It sets how the data is encoded when sent. The default works for text fields; use enctype="multipart/form-data" whenever the form includes a file upload.

How do I add placeholder text to a form field?

Add the placeholder attribute, for example <input placeholder="you@example.com">. Use it for a short example of the expected format, and always keep a real <label> as well, because the placeholder disappears as soon as someone starts typing.