Form Attributes (action, method)

Beyond action and method, the <form> element carries several other attributes that control encoding, where the response opens, browser autofill behavior, and whether built-in validation runs at all. Getting these right matters most for file uploads and multi-window flows.

enctype — How the Body Is Encoded

enctype only matters for method="post" — it controls how the form data is packaged into the request body.

enctype value	Use case
application/x-www-form-urlencoded	Default. Plain text fields, URL-encoded — fine for most forms.
multipart/form-data	Required whenever the form includes a file upload (<input type="file">).
text/plain	Rarely used; sends data with minimal encoding, mostly for debugging.

HTML

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="doc">Upload a document</label>
  <input type="file" id="doc" name="doc">
  <button type="submit">Upload</button>
</form>

Warning

Forgetting enctype="multipart/form-data" on a form with a file input is one of the most common upload bugs — without it, the browser sends only the file's name as plain text, never the file's actual contents.

method Recap

Briefly revisiting the core attribute: method="get" puts data in the URL (good for searches), method="post" puts it in the request body (required for anything sensitive or state-changing, and for file uploads).

target — Where the Response Opens

target behaves exactly like the same attribute on <a> — it controls which browsing context receives the response.

Value	Behavior
_self	Default. Opens in the same tab/frame.
_blank	Opens in a new tab or window.
_parent	Opens in the parent frame (if the form is inside an iframe).
_top	Opens in the full window, breaking out of any frames.
A named frame/iframe (e.g. "preview")	Opens the response inside that specific frame.

HTML

<form action="/generate-pdf" method="post" target="_blank">
  <button type="submit">Download Report as PDF</button>
</form>

Note

target="_blank" on a form is handy for actions that generate a downloadable or printable result (a PDF, a receipt) without navigating the user away from the page they were on.

autocomplete — Browser-Assisted Filling

autocomplete on the <form> sets a default for every field inside it; individual inputs can override it. Modern browsers use detailed autocomplete tokens (not just "on"/"off") to power autofill for addresses, payment details, and contact information.

HTML

<form autocomplete="on">
  <input type="text" name="name" autocomplete="name">
  <input type="email" name="email" autocomplete="email">
  <input type="text" name="cc-number" autocomplete="cc-number">
  <input type="password" name="new-password" autocomplete="new-password">
</form>

Token	Meaning
name / given-name / family-name	Full or partial personal name
email	Email address
tel	Phone number
street-address / postal-code / country	Shipping/billing address parts
cc-number / cc-exp / cc-csc	Payment card details
new-password / current-password	Distinguishes account creation from login, so password managers behave correctly
off	Requests the browser not autofill this field (advisory, not guaranteed)

Tip

Using specific autocomplete tokens (like cc-number or new-password) rather than a generic on/off is what actually lets browsers and password managers fill fields correctly and offer to save new credentials at the right time.

novalidate — Disabling Built-In Validation

By default, the browser checks every control's constraints (required, pattern, type-based rules) before allowing submission. novalidate on the <form> disables all of that — usually because the page implements its own custom validation UI with JavaScript instead.

HTML

<form action="/signup" method="post" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Sign Up</button>
</form>
<!-- The browser will NOT block submission or show its native validation bubble here.
     JavaScript is expected to validate and show errors instead. -->

Warning

Adding novalidate without replacing it with equivalent custom validation leaves your form silently accepting invalid data. Only use it when you have a real client-side (and always also server-side) validation strategy in place.

A Combined Example

HTML

<form
  action="/api/support-ticket"
  method="post"
  enctype="multipart/form-data"
  autocomplete="on"
  target="_self"
>
  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject" autocomplete="off" required>

  <label for="email">Your email</label>
  <input type="email" id="email" name="email" autocomplete="email" required>

  <label for="attachment">Attach a screenshot</label>
  <input type="file" id="attachment" name="attachment" accept="image/*">

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

Key Takeaways

enctype="multipart/form-data" is required whenever a form includes a file upload.
target controls which window/frame receives the submission response, useful for background downloads.
autocomplete tokens (name, email, cc-number, new-password, ...) let browsers autofill and password-manage correctly.
novalidate disables native constraint validation entirely — only use it alongside a real custom validation implementation.
GET vs POST remains the single most important attribute choice on any form.