Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Form action Property
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";
}
209 Views
