HTML Form Attributes: action, method, target, enctype and autocomplete

HTML form attributes like action, method, target, enctype, autocomplete and novalidate control where form data goes, how it is sent and how the browser helps users. Learn each one in depth.

Why form attributes matter

The <form> element is like an envelope. The fields inside are the letter, and the form attributes are what you write on the outside: the address, how to send it, and special handling notes. You met action and method in the Forms Basics lesson. Here is every important form attribute in detail.

Attribute	What it controls	Common values
action	Where the data is sent	A URL like /subscribe
method	How the data is sent	get (default), post, dialog
target	Where the response opens	_self (default), _blank
enctype	How the data is encoded	application/x-www-form-urlencoded (default), multipart/form-data
autocomplete	Whether the browser fills fields from memory	on (default), off
novalidate	Turns off built-in validation	No value needed
name	A name for the form, for scripts	Any text

The action attribute

action is the URL of the program on the server that receives the data. It can be:

• A relative path: action="/contact" or action="send.php".
• A full URL: action="https://forms.example.com/f/abc123" (many form services work this way).
• Left out: then the form sends the data to the current page's own URL. This is common in frameworks and PHP pages that handle their own forms.

HTML cannot save or email the data by itself; the program at the action URL does that.

The method attribute: GET vs POST in depth

How GET works

With method="get", the browser adds the data to the end of the URL as a query string. It starts with ?, each field is name=value, and fields are joined with &. Spaces become + and special characters are encoded.

<form action="/search" method="get" role="search">
  <label for="q">Search recipes</label>
  <input type="search" id="q" name="q">

  <label for="diet">Diet</label>
  <select id="diet" name="diet">
    <option value="">Any</option>
    <option value="vegan">Vegan</option>
    <option value="gluten-free">Gluten free</option>
  </select>

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

Type "banana bread" and choose "Vegan", then submit. The address bar shows /search?q=banana+bread&diet=vegan. You can bookmark or share that link, and it will run the same search again.

How POST works

With method="post", the data travels in the body of the request, not in the URL. You can see it in DevTools under Network, then the request, then Payload.

	GET	POST
Where the data goes	In the URL	In the request body
Visible in address bar and history	Yes	No
Can be bookmarked or shared	Yes	No
Size limit	URLs get too long after a few thousand characters	Very large, including files
File uploads	Not possible	Yes, with enctype
Refresh after submitting	Safe, just loads again	Browser asks "resend the data?"
Use for	Searches, filters, sorting	Sign-ups, logins, orders, messages, anything that changes data

There is also method="dialog", used for forms inside a <dialog> element: submitting closes the dialog instead of sending data to a server.

Common mistake: Using GET for a login or payment form. The password ends up in the address bar, the browser history and the server's log files. Use POST for anything private or anything that creates or changes data.

target and enctype

The target attribute

target says where to show the server's response, the same as on links. _self (the default) opens it in the same tab. _blank opens a new tab. You can also give the name of an <iframe>, and the result loads inside that frame.

<form action="/newsletter/preview" method="post" target="_blank">
  <label for="headline">Headline</label>
  <input type="text" id="headline" name="headline">
  <button type="submit">Preview in new tab</button>
</form>

Clicking the button opens the preview page in a new tab, so the user keeps their form open in the first tab. Tell users when something opens a new tab.

The enctype attribute and file uploads

enctype means encoding type: how the data is packed before it is sent. It only matters with method="post".

Value	When to use
application/x-www-form-urlencoded	The default; fine for text fields
multipart/form-data	Required when the form has a file input
text/plain	Rarely used; mainly for debugging

A file cannot be sent as a short line of text, so file uploads must use multipart/form-data. This packs each field, and each file, as a separate part.

<form action="/apply" method="post" enctype="multipart/form-data">
  <label for="applicant">Full name</label>
  <input type="text" id="applicant" name="name" required>

  <label for="cv">Your CV (PDF)</label>
  <input type="file" id="cv" name="cv" accept=".pdf" required>

  <button type="submit">Send application</button>
</form>

The server receives the name and the full PDF file. Without the enctype, the server would only receive the file's name as text, and the file itself would be lost, with no error message.

Note: Uploads need all three: method="post", enctype="multipart/form-data" and a name on the file input.

autocomplete and novalidate

The autocomplete attribute on a form

Browsers remember things people typed before, like their name, email and address. autocomplete="on" (the default) lets the browser offer these. autocomplete="off" on the <form> asks it to stop for all fields. You can still turn it on or off for single fields, which you will see in the Input Attributes lesson.

<form action="/gift-card/check" method="post" autocomplete="off">
  <label for="card-code">Gift card code</label>
  <input type="text" id="card-code" name="code">
  <button type="submit">Check balance</button>
</form>

Saved suggestions are not useful here, because every gift card code is different. Use off only when suggestions really don't help; for names, emails and addresses, autofill saves people a lot of typing.

Tip: Browsers and password managers often ignore autocomplete="off" on login fields, on purpose, because saved passwords make people safer. Use autocomplete="new-password" on sign-up forms instead, so the browser offers to create a strong password.

The novalidate attribute

Browsers check fields with attributes like required and type="email" before sending. novalidate turns those checks off for the whole form. It is a boolean attribute: just writing it means "yes".

<form action="/feedback" method="post" novalidate>
  <label for="fb-email">Email</label>
  <input type="email" id="fb-email" name="email" required>
  <button type="submit">Send</button>
</form>

You can now submit with an empty or invalid email. Developers use novalidate when JavaScript shows its own, custom error messages. The server must always check the data again anyway, because anyone can skip browser checks.

Practice exercise

Build a "Report a problem" form for a website. It should send with POST to /report, accept an optional screenshot file, open the confirmation page in the same tab, and keep autocomplete on. Then build a second form, a product filter, that sends with GET to /products with a category select and a maximum price number field.

Hint: the first form needs enctype="multipart/form-data". Submit the second one and look at the address bar to see your query string.

Key takeaways

• action sets where the data goes; leave it out to send to the current page.
• GET puts data in the URL for searches and filters; POST hides it in the request body for private or changing data.
• target="_blank" opens the response in a new tab.
• File uploads need method="post" and enctype="multipart/form-data".
• autocomplete="off" stops saved suggestions, and novalidate turns off browser validation.