Forms have always been the edge of the HTML that connects it to the backend and allow operations on user data. While users just have to enter the data and hit the submit button, data security responsibilities come over the developers. This all lies inside the way how the form is sent to the server.

The post and the get methods not only differ by their way of sending the data but also how they produce results in different environments. So choosing the right form method can help you avoid the unexpected or potentially harmful outcomes.

In my early days of learning HTML, finding out the right method for submitting forms always confused me. I didn’t have the solid explanation of when should I use which one. Learning from the Official W3C docs and some practical trails, the form things cleared out for me. This post explains the differences between the two and covering when should you use them.

The two form methods

The Method attribute of the form tag accepts only two HTTP values, get and post. They are used to encode and send the form data to the URL specified in action attribute, generally the PHP script.

The submitted data is then handled by the server, either saved in the database or used for another task. If you do not specify any form method, the form uses the default HTTP-GET value.

The GET method requests a representation of the specified resource. It appends the values of form inputs after the URL of the specified action page. GET should not be used for operations that cause side-effects, such as using it for taking actions in web applications. The value submitted using the GET method looks like this when encoded and sent to the server.

www.example.com?name=robert+age=34

The another benefit of sending data through GET method is that the page can be bookmarked, cached and shared while having the values stored. As you can see, the values entered are displayed after “?” in a key value pair. This is useful in the case where you want to save a searched text to retrieve the results later.

The POST method submits form data for processing to the identified resource. The data is included in the body of the request. This may result in the creation of a new resource or the updates of existing resources or both.

The above are the general explanations to understand the difference between these two methods. Practically, these two HTTP values are chosen on the basis of what type of data is to be submitted to the server. These data can are classified on their types, listed below.

1. Content Type.

The data content type is a prominent reason that affects the choice between the two methods. The post method stands out the choice when you have the following type of data/content to be submitted to the server.

1. Binary data: Most of the forms on the web requires you to submit your details along with your profile picture. Since the image can not be converted into text and sent over the URL, the get method fails in this case. The get method allows the application/x-www-form-urlencoded content type to encode the form data set, which is inefficient for transferring the binary data or non-ASCII characters such as files, multimedia content, and others.

The Post method along with encode type multipart/form-data encodes the form data efficiently to submit to the server. A multipart/form-data message contains a series of parts, each representing a successful control. The parts are sent to the processing agent in the same order the corresponding controls appear in the document stream. Without the multipart/form-data the Post method like the get method can not transfer the form data containing binary data. This is the correct way to get around this.

<form action="something.php" method="post" enctype="multipart/form-data'>
    Name: <input type="text" name="name">
    Profile Picture: <input type="file" name="profile">
    <input type="submit" value="Submit">
</form>

2. Data Length: Another limitation of using Get as a method value is it limits the length of the data to be sent. This is however not the fault of Get method, here the culprit is the browser’s address bar URL limit, which is generally 2048 characters. This is the reason why comments and feedbacks forms are usually sent through the Post method.

2. Data security.

Suppose you are creating a form to submit user’s credit card details. If you do not specify any method, the default Get method sends the form data over the URL, which makes it vulnerable to security threats. Such type of sensitive data can be easily tracked over the network. The third party services could scan the history logs and determine the loopholes resulting in catastrophic effects.

To avoid this, explicitly declare the method type as POST. It does not append parameters and values after the URL and sends the data to the server. So even if you are on a public connection, none can not find your details that are sent to the server, unless some hacky codes are not tracking you.

3. Data affecting the system.

Forms have multiple uses like signing up, giving feedbacks and comments, booking up tickets, or as small as search bars. You can’t guarantee if the user fills out the only once. Some of the users try re-submitting the form because they do not get any response from the server like a thank you message or any redirection. They end up hitting the submit button multiple times. However this is not always the fault of the user but mostly either of user agents(like poor internet connection) or unexpected server errors.

But not displaying a “thank you” message doesn’t mean servers aren’t catching up the form data. Clicking the submit button more than once adds a new response to the server which adds redundant records in the database.

Most of the servers are configured to remove the duplicate data, but not all systems are so smart. These type of non-idempotent data does much more than just adding some size to the database.

The Post method is suitable for the non-idempotent data(which can cause side effects) as it submits a single response. However, today’s systems have grown more advanced and handling duplicate responses is merely a piece of code. But as a safety measure, submit a form that can affect the system, through the Post method – like a form for booking a reservation ticket.

Methods in AJAX and Jquery

In addition to sending the data to the server, the HTTP Get and HTTP Post are used in specifying an AJAX Request using Jquery. The Get method here as well should be avoided when some sensitive data is to be sent to the server during AJAX calls.

The get method is ideal for AJAX unless you are dealing with some sensitive data, like displaying offers based on credit card types. Also because in the browser, the Post method is implemented in two steps – first, the browser sends the head value and then the body, in a sequential manner. Of course, this two-phase process through Post takes more time than the Get. Therefore for a faster experience, the Get method should be implemented.

Further Reading

Get vs Post for AJAX Requests – Raymond Camden

Conclusion

The Get method because of it’s passing the data to the web server as a set of encoded parameters appended to the URL, can be shared, bookmarked and cached. However, it can not transfer non-ASCII characters and avoided in the scenario where user data is critical.

The Post method, unlike the get method, does not have a limitation on the URL characters and it encodes the form data without displaying in the browser.

Hope this was able to clear the clouds in these two methods. Please share your thoughts and comments below.

Share on Facebook Tweet on Twitter Post on Google+ Buffer