The HTML method attribute specifies the HTTP method used to send form data to the server when the user submits the form.
Definition and Usage
➔ The method attribute is used with the <form> element to specify how to send form data to the server.
➔ The method attribute accepts the following values and resulting behavior:
- GET: method="get" is used for general purposes.
- get is default if not specified. Appends form data to a query string.
- The data is visible to the user, limited in size, and has no security.
- POST: method = "post" is used when there are data security concerns.
- post Sends form data in the body of the HTTP request.
- The data is not visible to the user, has no size limits, and is secure.
➔ The form method attribute can be overridden by a separate submit button within a form using the formmethod attribute. (eg. <input type="submit" value="Submit with POST" formmethod="post" >)
Syntax
//In HTML
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" id="fname" name="fname" value="Enter first name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lname" name="lname" value="Enter last name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" name="email" value="someone@example.com"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showQueryString()"></td>
</tr>
</table>
</form>
//In JavaScript
<script>
const element = document.getElementById('myform');
element.method = "get";
element.setAttribute('method', 'post');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML method attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input[type='text'] {
padding: 5px;
}
input[type='text']:hover,
textarea:hover {
background-color: #f6f6f6;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML method attribute example</h3>
<p>The method attribute is used with the form element to specify how to send form data to the server.</p>
<form id="myform" action="/server-side" method="get">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" id="fname" name="fname" value="Enter first name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lname" name="lname" value="Enter last name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" name="email" value="someone@example.com"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='40' rows='5'>This is your comment</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="showQueryString()"></td>
</tr>
</table>
</form>
<p id="result"><b>Note:</b> Click on the submit button to see the URLSearchParams of the form.</p>
</div>
</body>
<script>
let email = document.getElementById("email");
let comment = document.getElementById("comment");
function showQueryString() {
event.preventDefault();
const url = new URL(window.location.href);
//const data = {}; //name:value pairs
const data = { email: email.value, comment: comment.value };
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
const urlParams = new URLSearchParams(window.location.search);
let semail = urlParams.get('email');
let scomment = urlParams.get('comment');
document.getElementById("result").innerHTML = "Location.href are: " + url.href + "<br><br> Query Parameters are:" + "<br>Email: " + semail + ", <br>Comment: " + scomment;
alert("Query String: \n" + url.search);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.