This tutorial details the various attributes for the HTML <form> element.
The Action Attribute
The action attribute specifies the action to be taken when the form is submitted.
Typically, when the user clicks the submit button, the form data is sent to a file on the server.
In the example below, the form data is sent to a file named submission_page.php, which contains a server-side script (PHP) for processing the form data.
<form action="/submission_page.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>Note: If the action attribute is not specified, the form will submit data to the current page.
The Target Attribute
The target attribute determines the location where the response to the form submission will be displayed. This attribute can have the following values:
_blank: The response appears in a new window or tab
_self: The response appears in the current window
_parent: The response appears in the parent frame
_top: The response appears in the full body of the window
_framename: The response appears in a named iframe
By default, the target attribute is set to _self, indicating that the response will be displayed in the current browsing context or window.
<form action="/submission_page.php" target="_blank">The Method Attribute
The method attribute determines the HTTP method used for sending form data.
Data can be sent as URL variables with method GET or as an HTTP POST transaction with method POST.
The default method for submitting form data is GET.
Example
In this example, the form data is submitted using the GET method:
<form action="/submission_page.php" method="get">
Example
In this example, the form data is submitted using the POST method.
<form action="/submission_page.php" method="post">Notes on GET:
- Appends the form data to the URL, in name/value pairs
- NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
- The length of a URL is limited (2048 characters)
- Useful for form submissions where a user wants to bookmark the result
- GET is good for non-secure data, like query strings in Google
- GET also allows you to copy and use direct links to form submission values, like links to specific search pages.
Notes on POST:
- Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
- POST has no size limitations, and can be used to send large amounts of data.
- Form submissions with POST cannot be bookmarked
Note: When the form data contains sensitive or personal information, it's crucial to always use the POST method for submitting the data.
The Autocomplete Attribute
The autocomplete attribute determines whether a form should have autocomplete enabled or disabled.
When autocomplete is enabled, the browser automatically fills in form fields based on the user's previous entries.
<form action="/submission_page.php" autocomplete="on">The Novalidate Attribute
The novalidate attribute, when included, indicates that the form data should not be validated upon submission.
<form action="/submission_page.php" novalidate>List of All <form> Attributes
accept-charset: Defines the character encodings used for form submission.
action: Indicates the URL where the form-data will be sent upon submission.
autocomplete: Toggles whether the form should have autocomplete enabled or disabled.
enctype: Determines how the form-data is encoded when submitted to the server (applicable only for method="post").
method: Specifies the HTTP method (GET or POST) for sending the form-data.
name: Assigns a name to the form.
novalidate: Prevents form validation upon submission.
rel: Describes the relationship between the linked resource and the current document.
target: Defines the destination where the response should be displayed after form submission.
Please check below options for the links to our previous or next tutorial.