HTML Form Attributes

In this section the various HTML form element attributes are described.

You can also search for these topics, html form attributes required, html form attributes action, what are html form attributes, custom and all attributes, html form get and post methods, target attribute.

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" :

<form action="html-resources/submit.aspx">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text2" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

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.

You can also search for these topics, the action attribute in html from specifies that, without value, with space, change event, definition and example.

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.

<form action="html-resources/submit.aspx" target="_blank">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text3" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

Output :-

The form target attribute

When submitting this form, the result will be opened in a new browser tab :

You can also search for these topics, html the target attribute example, html the target attribute not working, get value, target attribute open in new tab, default target.

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.

<form action="html-resources/submit.aspx" target="_blank" method="get">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text5" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

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.

<form action="html-resources/submit-post.aspx" target="_blank" method="post">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text7" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

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!.

You can also search for these topics, html the method attribute key value, html get vs post, types of http methods, http get and http post example.

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 :-

<form action="html-resources/submit.aspx" target="_blank" autocomplete="on">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text9" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

Output :-

You can also search for these topics, html autocomplete attribute values example, autocomplete on off, login fields, browser support.

The Novalidate Attribute

If a form has the novalidate attribute then the form-data (user input) should not be validated upon submission.

<form action="html-resources/submit.aspx" target="_blank" novalidate>
  <label for="myname">Your name:</label><br />
  <input type="email" id="Text11" name="myname" value="xyz" /><br />
  <input type="submit" value="Submit" /><br />
</form>

Note:- The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).

You can also search for these topics, html novalidate attribute contains, what does the novalidate attribute do in html, novalidate attribute not found.