HTML DOM Input Submit formMethod property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input Submit formMethod property is used for setting or returning the formMethod attribute value of a submit button. This specifies which HTTP method to be used when sending form data to the server. The formMethod attribute value overrides the method attribute value associated with the <form> element. It introduced in HTML5 for input element with type submit.

Syntax

Following is the syntax for −

Setting the formMethod property −

submitObject.formMethod = 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. As no one can look at the data while it is being sent to the server, the post method doesn’t have any size limitations like get method.

Example

Let us look at an example for the Submit formMethod property −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Submit formMethod property</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id=“Loc”><br><br>
<input type="submit" id="SUBMIT1" formmethod="post">
</form>
<p>Set the formMethod attribute value of the above submit button inside the form to get
by clicking the below button</p>
<button onclick="changeMethod()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeMethod() {
      document.getElementById("SUBMIT1").formMethod = "get";
      document.getElementById("Sample").innerHTML = "The formaction attribute value has been changed from post to get";
}
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CHANGE button −

raja
Published on 19-Aug-2019 14:47:53
Advertisements