HTML Form Action: POST and GET

The method attribute in the <form> element specifies how the data is sent to the server.

HTTP methods declare what action is to be performed on the data that is submitted to the server. HTTP Protocol provides several methods, and the HTML Form element is able to use two methods to send user data:

• GET method - used to request data from a specified resource
• POST method - used to send data to a server to update a resource

The GET Method

The HTML GET method is used to get a resource from the server. For example,

<form method="get" action="www.programiz.com/search">
    <input type="search" name="location" placeholder="Search.." />
    <input type="submit" value="Go" />
</form>

When we submit the above form by entering California in the input field, the request sent to the server will be www.programiz.com/search/?location=California.

The HTTP GET method adds a query string at the end of the URL to send data to the server. The query string is in the form of key-value pair followed by ? symbol.

From the URL, the server can parse the user-submitted value where:

• key - location
• value - California

Note: If there is more than one query, the query string will be separated by a & symbol.

The POST method

The HTTP POST method is used to send data to the server for further processing. For example,

<form method="post" action="www.programiz.com/user">
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" /><br />
    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" /><br />
    <input type="submit" />
</form>

When we submit the form, it will add the user input data to the body of the request sent to the server. The request would look like

POST /user HTTP/2.0
Host: www.programiz.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 33

firstname=Robin&lastname=Williams

The data sent is not easily visible to the user. However, we can check the sent data using special tools like the browsers' dev tools.

GET vs POST