HTML Form Attributes

Explore critical properties governing form operations and data transmission protocols

Form elements incorporate numerous significant properties dictating operational characteristics and destination routing for submitted information. Mastering these configuration options remains fundamental for constructing functional data collection interfaces.

Form Attributes Overview

Here are the most commonly used form attributes:

Attribute Description
action Specifies where to send form data when submitted
method Specifies the HTTP method to use when sending form data
target Specifies where to display the response after submitting
autocomplete Specifies whether the form should have autocomplete on or off
novalidate Specifies that the form should not be validated when submitted
enctype Specifies how form data should be encoded when submitted
accept-charset Specifies the character encodings used for form submission

The action Attribute

The action attribute defines the action to be performed when the form is submitted. Typically, the form data is sent to a file on the server when the user clicks the submit button.

Example

<form action="/submit-form.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

When the form is submitted, the form data is sent to /submit-form.php.

💡 Tip

If the action attribute is omitted, the form will be submitted to the current page URL.

The method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

Using GET Method

Example

<form action="/submit-form.php" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Notes on GET:

  • Appends form data to the URL in name/value pairs
  • The length of a URL is limited (about 2048 characters)
  • Never use GET to send sensitive data (passwords will be visible in URL!)
  • Useful for form submissions where a user wants to bookmark the result
  • GET is better for non-secure data, like query strings in Google

URL with GET parameters looks like this:

/submit-form.php?fname=John&lname=Doe

Using POST Method

Example

<form action="/submit-form.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Notes on POST:

  • Appends form data inside the body of the HTTP request (data is not shown in URL)
  • Has no size limitations
  • Form submissions with POST cannot be bookmarked
  • POST is more secure than GET, and should be used for sensitive data
  • POST is always preferred when sending passwords or other sensitive information

When to Use GET?

Use GET when:

  • The form submission is idempotent (can be repeated safely)
  • You want users to be able to bookmark the results
  • You're creating a search form
  • The data is not sensitive

When to Use POST?

Use POST when:

  • Sending sensitive data (passwords, credit cards, etc.)
  • Uploading files
  • The form changes data on the server (creates, updates, deletes)
  • Sending large amounts of data

Default Method

If the method attribute is not specified, GET is the default method.

The target Attribute

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

The target attribute can have one of the following values:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

Example

<form action="/submit-form.php" method="post" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

The form submission response will be displayed in a new browser tab or window.

The autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically completes values based on values that the user has entered before.

Example

<form action="/submit-form.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Autocomplete values:

  • on - Autocomplete is enabled (default)
  • off - Autocomplete is disabled

💡 Tip

You can set autocomplete on the form level (for all inputs) or on individual input elements. Individual input settings override the form setting.

The novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

Example

<form action="/submit-form.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="Submit">
</form>

Even though the email field has the required attribute and type email, the form will submit without validation because of the novalidate attribute.

Use cases for novalidate:

  • Testing purposes during development
  • When using custom JavaScript validation
  • Saving form drafts that might be incomplete

The enctype Attribute

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

Note: The enctype attribute can only be used with method="post".

Value Description
application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces become "+", special characters become ASCII HEX values)
multipart/form-data No characters are encoded. Required when using forms that have a file upload control
text/plain Spaces are converted to "+" symbols, but no special character encoding

Example - Default Encoding

<form action="/submit-form.php" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

Example - File Upload (multipart/form-data)

<form action="/upload.php" method="post" enctype="multipart/form-data">
  <label for="file">Select a file:</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Upload">
</form>

⚠️ Important

Always use enctype="multipart/form-data" when your form includes a file upload input (<input type="file">). Without it, file uploads will not work.

The accept-charset Attribute

The accept-charset attribute specifies the character encodings that are to be used for the form submission.

The default value is the reserved string "UNKNOWN" (indicates that the encoding equals the encoding of the document containing the form element).

Example

<form action="/submit-form.php" accept-charset="UTF-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="Submit">
</form>

Common character sets:

  • UTF-8 - Unicode (covers all characters and symbols in the world)
  • ISO-8859-1 - Latin alphabet
  • You can specify multiple character sets separated by spaces

Complete Example with Multiple Attributes

Example - Contact Form with Form Attributes

<form
  action="/contact-form.php"
  method="post"
  target="_self"
  autocomplete="on"
  accept-charset="UTF-8">

  <h3>Contact Us</h3>

  <label for="name">Full Name:</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="5" cols="40"></textarea><br><br>

  <input type="submit" value="Send Message">
</form>

This form demonstrates several attributes working together:

  • action - Sends data to /contact-form.php
  • method - Uses POST for secure transmission
  • target - Response displays in same window
  • autocomplete - Enables browser autocomplete
  • accept-charset - Ensures UTF-8 encoding for international characters

Form Attributes Best Practices

  • Always specify action: Even though it's optional, always include the action attribute for clarity
  • Use POST for sensitive data: Never use GET for passwords or personal information
  • Use GET for search forms: Allows users to bookmark search results
  • Set enctype for file uploads: Always use multipart/form-data when uploading files
  • Consider autocomplete carefully: Turn off for sensitive fields like credit card numbers
  • Use UTF-8 encoding: Set accept-charset="UTF-8" to support international characters
  • Avoid novalidate in production: Only use during development or with custom validation
  • Default target is usually best: Only change target when you have a specific reason

Test Your Knowledge