HTML DOM Form method Property

HTMLWeb DevelopmentFront End Technology

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' ";
}
raja
Published on 19-Aug-2019 11:49:42
Advertisements