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 method Property
The HTML DOM form method property is associated with the method attribute of a form element. This property is used for specifying how the form data should be sent to the server. The address to send data is specified by the action attribute. This property sets or gets the form method property value.
Syntax
Following is the syntax for −
Setting the method property −
formObject.method = get|post;
Here, get is the default method and appends the form-data to the url. Eg: URL?name=value&name=value. It is usually not secure and can be used for data that is not private. The user can see the data being sent by looking at the url string.
The second method post sends the data as an HTTP post transaction and is usually secure, since no one can look at the data while it is being sent to the server.
Example
Let us look at an example for the form method property −
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the method attribute value of the form above by clicking the below button</p>
<button onclick="ChangeMethod()">Change</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the SUBMIT button and viewing the URL −
127.0.0.1:5500/sample_page.php
On clicking the “Change” Button −
On clicking the SUBMIT button now and viewing the link.
127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22
In the above example −
We have first created a form that has id=“FORM1”, method=“post” and action attribute value set to “/sample_page.php”. Here the method attribute value post ensures that the form data is transferred securely and isn’t viewed by everyone. The form contains two input fields with type text and a submit button to submit the form data to server.
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> </form>
We have then created a button “Change” that will execute the changeMethod() function when clicked by the user.
<button onclick="ChangeMethod()">Change</button>
The ChangeMethod() function gets the form element using the document object getElementById() method and set its method attribute value to “get”. Changing the value to “get” means the user data can now be displayed in the url. Using the innerHTML property of a paragraph with id “Sample” we display the intended text about this change −
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
96 Views
