HTML Form Attributes
The many characteristics for the HTML <form> (HTML Form Attributes) element are covered in this chapter.
The Action Attributes
The action that will be taken upon submission of the form is specified by the action attribute.
Typically, when a user clicks the submit button, the form’s data is transmitted to a file on the server.
The form data is delivered to a file named “action_page.php” in the example below. A server-side script that manages the form data is contained in this file:
Example
On submit, send form data to “action_page.php”:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Johnny"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doesun"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute
Where the response is displayed when the form is submitted is determined by the target attribute.
One of the following values can be assigned to the target attribute:
| 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 full body of the window |
| framename | The response is displayed in a named iframe |
The default value is _self which means that the response will open in the current window.
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
The Method Attribute
The HTTP method to be used when submitting the form data is specified by the method property.
The form data may be provided as an HTTP post transaction (with method=”post”) or as URL variables (with method=”get”).
When submitting form input, the GET HTTP method is used by default.
Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
Example
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
Notes on GET:
- adds the name/value pairs of the form data to the URL.
- NEVER send critical info via GET! (The URL displays the data from the submitted form!)
- A URL can only be a maximum of 2048 characters long.
- helpful when a user submits a form and wants to bookmark the outcome
- For insecure data, such as query strings on Google, GET is useful.
Notes on POST:
- adds the form data to the HTTP request body (the form data that has been submitted is not displayed in the URL).
- POST allows for the sending of massive volumes of data and has no size restrictions.
- Submissions of forms via POST cannot be bookmarked.
The Autocomplete Attribute
Whether autocomplete should be enabled or disabled on a form is specified by the autocomplete attribute.
When autocomplete is enabled, the user’s previous input values are used by the browser to automatically complete values.
Example
A form with autocomplete on:
<form action="/action_page.php" autocomplete="on">
The Novalidate Attribute
A boolean attribute, the novalidate attribute.
When present, it indicates that upon submission, the form-data (input) should not be validated.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>
List of All Attributes
| Attribute | Description |
|---|---|
| accept-charset | Specifies the character encodings used for form submission |
| action | Specifies where to send the form-data when a form is submitted |
| autocomplete | Specifies whether a form should have autocomplete on or off |
| enctype | Specifies how the form-data should be encoded when submitting it to the server (only for method="post") |
| method | Specifies the HTTP method to use 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 a linked resource and the current document |
| target | Specifies where to display the response that is received after submitting the form |
