HTML DOM Form action Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Form action property is associated with the action attribute of the form element. The form action property specifies the web page to send the form data after being submitted by the user. This attribute is called after the form has been submitted to specify where to submit the form.

Syntax

Following is the syntax for −

Set the Form action property −

formObject.action = URL

Here, the URL specifies the address to send the form data to. It can be an absolute URL or a relative URL.

Example

Let us look at an example of the form action property −

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAction() {
      document.getElementById("FORM1").action = "/example_web.asp";
      document.getElementById("Sample").innerHTML = "The action attribute value of the form is
      changed to /example_web.asp";
   }
</script>
</head>
<body>
<h1>Form action property example</h1>
<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAction()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

Output

This will produce the following output −

On clicking the CHANGE button −

In the above example −

We have created a form with id=“Form1” and action “/sample.php”. The action attribute value specifies that the form data will be submitted to sample.php page and its a relative url. The form contains a text field and a password field.

<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

We have then created a CHANGE button that will execute the changeAction() method on being clicked by the user −

<button onclick="changeAction()">CHANGE</button>

The changeAction() method gets the “FORM1” element and sets its action property value to “/example_web.asp”. Using the innerHTML property of a paragraph with id “Sample” we display this change by displaying text to the user −

function changeAction() {
   document.getElementById("FORM1").action = "/example_web.asp";
   document.getElementById("Sample").innerHTML = "The action attribute value of the form is changed to /example_web.asp";
}
raja
Published on 19-Aug-2019 11:34:53
Advertisements