HTML - method Attribute

The HTML method attribute is used to define which HTTP method to use when submitting the form.

The method attribute value can be either GET or POST, where 'GET' is the default method. If you haven't specified the method attribute, it assumes it to be the default 'GET' method.

Difference between GET and POST method

The GET method is used to request a URL from a web server to fetch user-submitted form input data. After submitting the form data (values) will appear on the URL.

The POST method is used to send or append the form data inside the body of the HTTP request. The form data(values) will not appear on the URL after submitting the form.

Syntax

Following is the syntax of method attribute −

<form method = "value"></form>

Where value can be ‘GET’ or ‘POST’.

Example

In the following example, we are using the HTML 'method' attribute with the form element to define which HTTP method (i.e. GET method) should be used when submitting the form.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'method' attribute</title>
   <style>
      form {
         width: 300px;
         height: 200px;
         background-color: aquamarine;
         border-radius: 5px;
      }

      form h2 {
         text-align: center;
         margin-top: 5px;
         font-family: sans-serif;
         position: relative;
         top: 5px;
      }

      form label {
         position: relative;
         margin: 5px 10px;
      }

      form input {
         padding: 7px
      }

      form button {
         padding: 7px;
         width: 100px;
         margin: 0px 10px;
      }
   </style>
</head>
<body>
   <!--HTML 'method' attribute-->
   <p>Example of the HTML 'method' attribute</p>
   <form method="GET">
      <h2>Login Page</h2>
      <label for="">Username</label>
      <input type="text" name="uname">
      <br>
      <br>
      <label for="">Passwaord</label>
      <input type="password" name="password">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field along with a click button displayed on the webpage.

Example

The following is another example HTML ‘method’ attribute. Here, we are creating a form that contains two input fields and a button. Then, we use the method attribute within the form element and assign the method value as ‘POST’ to send the form data to the server.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'method' attribute</title>
   <style>
      form {
         width: 300px;
         height: 200px;
         background-color: rgb(7, 130, 89);
         border-radius: 5px;
         color: white
      }

      form h2 {
         text-align: center;
         margin-top: 5px;
         font-family: sans-serif;
         position: relative;
         top: 5px;
      }

      form label {
         position: relative;
         margin: 5px 10px;
      }

      form input {
         padding: 7px;
         color: green;
      }

      form button {
         padding: 7px;
         width: 100px;
         margin: 0px 10px;
      }
   </style>
</head>
<body>
   <!--HTML 'method' attribute-->
   <p>Example of the HTML 'method' attribute</p>
   <form method="POST">
      <h2>Login Page</h2>
      <label for="">Username</label>
      <input type="text" name="uname">
      <br>
      <br>
      <label for="">Passwaord</label>
      <input type="password" name="password">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input field along with a click button on the webpage.

html_attributes_reference.htm
Advertisements