HTML Form Attributes

The action and method Attributes

The action attribute specifies the URL where form data should be sent when submitted.

If action is omitted, the form submits to the current page URL.

The method attribute defines the HTTP method: GET or POST.

GET appends form data to the URL (visible in address bar), while POST sends it in the request body (not visible).

Use GET for searches and bookmarkable results; use POST for sensitive data, file uploads, and data that modifies server state.

<!-- Search form with GET (data in URL) -->
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>
<!-- Submits to: /search?q=user+query -->

<!-- Login form with POST (data hidden) -->
<form action="/login" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

The target Attribute

The target attribute specifies where to display the response after submitting the form.

Values include: _self (same window/tab, default), _blank (new window/tab), _parent (parent frame), _top (full window).

You can also specify a named iframe or window as the target.

Use target="_blank" cautiously as it can confuse users by opening unexpected new tabs.

<!-- Open result in new tab -->
<form action="/process" method="POST" target="_blank">
  <input type="text" name="data">
  <button type="submit">Submit</button>
</form>

<!-- Submit to iframe -->
<form action="/result" method="POST" target="resultFrame">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<iframe name="resultFrame" width="600" height="400"></iframe>

The autocomplete Attribute

The autocomplete attribute controls whether the browser should autofill form fields based on previous entries.

Values are 'on' (enable autocomplete, default) or 'off' (disable autocomplete).

Can be set on the form element (affects all fields) or individual input elements.

Useful for disabling autocomplete on sensitive fields like credit card numbers or one-time codes.

<!-- Disable autocomplete for entire form -->
<form action="/submit" method="POST" autocomplete="off">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<!-- Form with autocomplete on, but specific field off -->
<form action="/payment" method="POST" autocomplete="on">
  <input type="text" name="name" autocomplete="on">
  <input type="text" name="credit-card" autocomplete="off">
  <button type="submit">Pay</button>
</form>

The novalidate Attribute

The novalidate attribute is a boolean attribute that disables browser's built-in form validation.

When present, the form will submit even if required fields are empty or validation constraints aren't met.

Useful when implementing custom JavaScript validation instead of relying on HTML5 validation.

Generally, it's better to use HTML5 validation and enhance it with JavaScript rather than disabling it entirely.

<!-- Form without validation -->
<form action="/submit" method="POST" novalidate>
  <input type="email" name="email" required>
  <input type="number" name="age" min="18" required>
  <button type="submit">Submit</button>
</form>
<!-- Will submit even with invalid email or age < 18 -->

<!-- Standard form with validation (recommended) -->
<form action="/submit" method="POST">
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>
<!-- Browser validates before submission -->

The enctype Attribute

The enctype attribute specifies how form data should be encoded when submitting to the server.

Default is 'application/x-www-form-urlencoded' (standard URL encoding for text data).

Use 'multipart/form-data' when the form includes file uploads (required for <input type="file">).

Use 'text/plain' rarely, only for email or debugging (not recommended for production).

Only applies to POST requests; GET requests always use URL encoding.

<!-- Standard form (default encoding) -->
<form action="/submit" method="POST">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<!-- File upload form (requires multipart/form-data) -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file">
  <input type="text" name="description">
  <button type="submit">Upload</button>
</form>

<!-- Plain text encoding (rarely used) -->
<form action="/feedback" method="POST" enctype="text/plain">
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

The accept-charset Attribute

The accept-charset attribute specifies the character encodings accepted by the server.

Default is the document's character encoding (usually UTF-8).

Multiple encodings can be specified as a space-separated list.

Rarely needed in modern web development since UTF-8 is the standard.

<!-- Specify accepted character encoding -->
<form action="/submit" method="POST" accept-charset="UTF-8">
  <input type="text" name="name">
  <button type="submit">Submit</button>
</form>

<!-- Multiple encodings -->
<form action="/submit" method="POST" accept-charset="UTF-8 ISO-8859-1">
  <input type="text" name="data">
  <button type="submit">Submit</button>
</form>