HTML Form Attributes

This chapter introduces HTML <form> Different attributes of the element.

Action Attribute

action The attribute defines the operation to be performed when submitting the form.

Generally, when the user clicks the "Submit" button, the form data is sent to a file on the server.

In the following example, the form data is sent to a file named "action_page.php". This file contains the server-side script that handles the form data:

Example

After submission, the form data is sent to "action_page.php":

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

Try It Yourself

Tip:If the action attribute is omitted, the action is set to the current page.

Target Attribute

target The attribute specifies where the response is displayed after submitting the form.

target The attribute can be set to 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 current window.
_parent The response is displayed in the parent frame.
_top The response is displayed in the entire body of the window.
framename The response is displayed in the named iframe.

The default value is _self, which means the response will be opened in the current window.

Example

Here, the submitted results will be opened in a new browser tab:

<form action="/action_page.php" target="_blank">

Try It Yourself

Method Attribute

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

Form data can be used as URL variables (using method="get") or as an HTTP POST transaction (using method="post") sent.

The default HTTP method when submitting form data is GET.

Example

In this example, the GET method is used to submit form data:

<form action="/action_page.php" method="get">

Try It Yourself

Example

In this example, the POST method is used to submit form data:

<form action="/action_page.php" method="post">

Try It Yourself

Points to note about GET:

  • Append form data to the URL in the form of name/value pairs
  • Never use GET to send sensitive data! (The submitted form data is visible in the URL!)
  • The length of the URL is limited (2048 characters)
  • Very useful for form submissions where the user wants to add the results as a bookmark
  • GET is suitable for non-sensitive data, such as query strings in Google

Points to note about POST:

  • Attach form data to the body of the HTTP request (the submitted form data is not displayed in the URL)
  • POST has no size limit and can be used to send a large amount of data.
  • Form submissions with POST cannot add bookmarks

Tip:If the form data contains sensitive information or personal information, please use POST!

Autocomplete Attribute

autocomplete The attribute specifies whether the form should open the autocomplete feature.

After enabling the autocomplete feature, the browser will automatically fill in values based on the user's previous inputs.

Example

Enable automatic form filling:

<form action="/action_page.php" autocomplete="on">

Try It Yourself

Novalidate Attribute

novalidate The attribute is a boolean attribute.

If set, it specifies that the form data should not be validated when submitted.

Example

Form without novalidate attribute set:

<form action="/action_page.php" novalidate>

Try It Yourself

List of all <form> Attributes

Attribute Description
accept-charset Specifies the character encoding used for form submission.
action Specifies where to send the form data when submitting the form.
autocomplete Specifies whether the form should open the auto-complete (filling) feature.
enctype Specifies how to encode the form data when submitting it to the server (only for method="post").
method Specifies the HTTP method to be used when sending form data.
name Specifies the name of the form.
novalidate Specifies that the form should not be validated when submitted.
rel Specifies the relationship between the linked resource and the current document.
target Specifies where to display the received response after submitting the form.