HTML “form” element is basically a section in the HTML document containing various inputs, texts, passwords fields as well as the radio, and the submit buttons. It takes input from the user and then saves the entered data on either the client or the server side. It requires special “action” attributes to specify the data location where it needs to be stored. The user can access these attributes with the help of the built-in JavaScript “action” property.

This guide illustrates the working of the HTML DOM Form “action” property in JavaScript.

How Does the HTML DOM Form “action” Property Work in JavaScript?

The form “action” property is associated with the “action” attribute of the HTML form element. It retrieves the URL where the form information is submitted. It can also be implemented to customize the existing value of the “action” attribute.

Syntax (Set “action” Attribute Value)

The above syntax requires the “URL” of the location where the form information will be saved. The URL may be the “absolute URL (https://linuxhint.com/)” or the “relative URL (test.php)”.

Syntax (Return “action” Attribute Value)

This syntax returns the string that contains the URL of the web page where the form data is sent after the form is submitted.

Let’s implement the above-defined syntaxes.

Example 1: Applying the Form “action” Property to Set the “action” Attribute Value

This example utilizes the form “action” property to set the “action” attribute value i.e., URL of the location where the form data will be sent and saved.

HTML Code

First, consider the stated HTML code:

In the above code lines:

• Define a sub-heading with the help of the “<h2>” tag.
• Next, create a form using the “<form>” tag having an id “demo”, and the “action” attribute that redirects to the JavaScript function “submit()” which displays the entered form information on the client side.
• After that, four input fields are specified in the created form element with the type “text” and the specified “name” attributes.
• Lastly, the “<button>” tag is added with the type “submit”.

JavaScript Code

Next, proceed with the below-given code:

In the above code lines:

• The function named “submit()” is defined in which the data will be stored.
• In its definition, the “result” variable is declared that applies the “getElementsByName()” method to access the input fields using their assigned names and get the entered values by specifying the “index” with the “value” property.
• Lastly, an alert box is created that takes the “result” variable as its argument and displays the input values as an alert.

Output

The output pops up an alert box on a button click showing the stored information of the given form.

Example 2: Applying the Form “action” Property to Return the “action” Attribute URL

This example uses the “action” property to retrieve the existing “action” attribute value.

HTML Code

Append the “Example 1” HTML code with the following code lines in this example:

In this code snippet:

• The “<h4>” tag specifies a subheading of level 4.
• The “<button>” tag includes a button with an attached “onclick” event to invoke the JavaScript “get()” function on button click.
• The “<p>” tag adds an empty paragraph with an assigned id “demo”.

JavaScript Code

Now, follow the below-given code:

In the above code block:

• The function named “get()” is defined.
• Now, apply the “getElementById()” method to fetch the form element having id “sample” to display its specified “action” attribute value using the “action” property.
• The “document.getElementById()” method is applied again to access the empty paragraph through its id “demo” and append it with the “value” variable using the “innerHTML” property.

Output

As seen, the output returns the “action” attribute value upon triggering the latter button.

Conclusion

DOM (Document Object Model) form “action” property works on the “action” attribute. It adds, modifies, and retrieves the “action” attribute value. This guide illustrated the working of the HTML DOM form “action” property in detail.