HTML Form Attributes
In this section the various HTML form
element attributes are described.
The action Attribute
The action
attribute defines the action that needs to be done when submitting the form.
Usually, when the user clicks on the submit button, the form data will be sent to a server file which is mentioned in the action
attribute.
In this example, the file called "action page.php" is sent to a form data file. This file contains a script on the server that handles data for the form :
Example:- On submit, send form data to "action_page.php" :
Output :-
If you click the "Submit" button, the form-data will be sent to a page called "submit.aspx".
Tip :- The action page is set to the current page, when the action
attribute is not included or mentioned.
The target Attribute
The target
characteristic indicates where the answer received will be displayed when the form is submitted.
You can find one of the values in the target
attribute:
Value | Description |
---|---|
_blank | A new window or tab will open with the response. |
_self | In the current window, the response is visible. |
_parent | In the parent frame, the response is shown. |
_top | The answer is visible throughout the window's whole body. |
frame name | In a named iframe, the response is shown. |
The default value is _self
, meaning that the answer (submitted result) opens in the window.
Example :- In this example, in a new browser window or tab the submitted result will open.
Output :-
The form target attribute
When submitting this form, the result will be opened in a new browser tab :
Related Links
The Method Attribute
The method
attribute specifies the HTTP method to apply in the form data submission.
The form-data may be sent as URL (method="get"
) variables, or as HTTP after transaction (method="post"
).
GET
is the default approach for HTTP submission.
Example 1:- For submitting the form information, this example uses the GET
method.
Output :-
After you submit, notice that the form values is visible in the address bar of the new browser tab.
Example 2:-This example utilises the POST
method for form data submission.
Output :-
After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.
Notes on GET :-
- Set in name/value pairs of the URL the form data.
- NEVER send sensitive information via GET! (The URL displays the submitted form data!).
- A URL is limited in length (2048 characters).
- For form entries where a user wants to bookmark the outcome.
- GET is good for unreliable data, such as Google query strings.
Notes on POST :-
- Enter the form data within the HTTP request body (the submitted form data is not shown in the URL).
- POST does not have any limitations in its size and can be used for large data sending amounts.
- The POST application form cannot be bookmarked.
Tip:- Use POST always when data on the form contains information that is sensitive or personal!.
The Autocomplete Attribute
The autocomplete attribute determines whether an autocomplete form is required or not.
The browser automatically completes values based on the user previously entered values when autocomplete is on.
Example :-
Output :-
Related Links
The Novalidate Attribute
If a form has the novalidate
attribute then the form-data (user input) should not be validated upon submission.
Note:- The novalidate
attribute of the form tag is not supported in Safari 10 (or earlier).