Submit HTML Form using GET or Post Methods
Form submission in HTML
What is it?
Let uss see in how many steps we take input from user.
Talking about step 4.
How is a the form filled up by the user is submitted?
You must have understood by now that all the communication to and from the web-server is done by the browser. So there must be some way to tell the browser that the user is done with the form.
If you remember about the submit button, this button does exactly this thing. When a user has filled up a web-form he clicks on the submit button. When a submit button is clicked, the browser then knows that the form associated with this particular button (As there might be multiple forms on a web-page) is to be submitted to the server. The browser gets the location of the web-server from the action attribute of the associated web-form. Now the browser creates an HTTP request to the server with the values of the form fields. I mean this complete thing, when I think of form submission in HTML.
The browser might create any two of the following HTTP requests depending on yet another attribute "method" of the HTML element "form".
We will now learn one by one about these two methods in detail.
<!--Get Method of form submission-->
The GET method in HTML The GET method is the most commonly used HTTP request type. Actually whenever you enter a simple url in your browser, your browser will make a GET request to the web server. How come? You will become pretty sure of this as you learn what actually is a GET method.
When making an HTTP request by GET method, the browser encodes the form content in the url in the form of name value pairs separated by an ampersand "&". It then appends it to the url specified by the action attribute of the form with a question mark in between the name-value pairs and the url. A typical form submitted by GET method will create a url like “http://www.tutorialindia.com/index.php?userid=john&password=sweet”.
As the url formed while making an HTTP request using a GET method is visible in the address bar, GET method is not recommended for sending sensitive data. Also, as the browser stores the values in the cache, each time the form is submitted, you might not get the desired result. You can learn more about browser caching in the section browser caching. Other hitch in using the get method is that as the maximum length of url is fixed, all the data submitted in the form might not be submitted. To get around this problem, use the post method as discussed in the next section.
The POST method in HTML
In POST method all the form data is encoded as headers. The data is illegible to browser hence it can not cache the form content. Due to this the form is submitted every time the submit button is clicked. Also, You can send as much data as you wish using POST method. With the POST method, the form becomes a black box for the browser. Though it does process the form, it never stores any form value anywhere. This is because it does not know what is inside the box. The browser might store the black box itself temporarily. All the form data is destroyed completely when one closes the browser.
When should one use the GET method and when the POST?
What is it?
Let uss see in how many steps we take input from user.
- The user requests a page using a browser.
- The server sends an html markup to the browser. This markup contains a form which has some input fields as discussed earlier.
- The user fills up the web-form as he would have done filled up any ordinary physical form.
- Now the form is submitted to the server.
- The server processes the form and informs the user accordingly.
Talking about step 4.
How is a the form filled up by the user is submitted?
You must have understood by now that all the communication to and from the web-server is done by the browser. So there must be some way to tell the browser that the user is done with the form.
If you remember about the submit button, this button does exactly this thing. When a user has filled up a web-form he clicks on the submit button. When a submit button is clicked, the browser then knows that the form associated with this particular button (As there might be multiple forms on a web-page) is to be submitted to the server. The browser gets the location of the web-server from the action attribute of the associated web-form. Now the browser creates an HTTP request to the server with the values of the form fields. I mean this complete thing, when I think of form submission in HTML.
The browser might create any two of the following HTTP requests depending on yet another attribute "method" of the HTML element "form".
- The GET Method
- The POST Method.
| Code |
<form action="#" method="GET"> |
| Code |
<form action="#" method="POST"> |
<!--Get Method of form submission-->
The GET method in HTML The GET method is the most commonly used HTTP request type. Actually whenever you enter a simple url in your browser, your browser will make a GET request to the web server. How come? You will become pretty sure of this as you learn what actually is a GET method.
When making an HTTP request by GET method, the browser encodes the form content in the url in the form of name value pairs separated by an ampersand "&". It then appends it to the url specified by the action attribute of the form with a question mark in between the name-value pairs and the url. A typical form submitted by GET method will create a url like “http://www.tutorialindia.com/index.php?userid=john&password=sweet”.
As the url formed while making an HTTP request using a GET method is visible in the address bar, GET method is not recommended for sending sensitive data. Also, as the browser stores the values in the cache, each time the form is submitted, you might not get the desired result. You can learn more about browser caching in the section browser caching. Other hitch in using the get method is that as the maximum length of url is fixed, all the data submitted in the form might not be submitted. To get around this problem, use the post method as discussed in the next section.
The POST method in HTML
In POST method all the form data is encoded as headers. The data is illegible to browser hence it can not cache the form content. Due to this the form is submitted every time the submit button is clicked. Also, You can send as much data as you wish using POST method. With the POST method, the form becomes a black box for the browser. Though it does process the form, it never stores any form value anywhere. This is because it does not know what is inside the box. The browser might store the black box itself temporarily. All the form data is destroyed completely when one closes the browser.
When should one use the GET method and when the POST?
- Use the GET method if you do not expect the result or effect on server side to change.
- For the above reason, GET method should be used to fetch static data. For example, one multinational company stores the nationality of its employees in its database. To know the nationality of any specific employee, the GET method is recommended.
- Use the POST method when you plan to do update, delete or other similar operations on the server side.
- You can use the POST method for retrieving data also, if you think the input parameters might cross the maximum url length limit. Very unlikely.
- Other case will be when you do not want the user to bookmark or see the form content being sent. Like in the case of sending the password.
- Several times you will be using hidden fields in you forms. User might get confused when he sees such a field on the url which he can not relate to the fields available on the screen. To make these fields less visible you can use POST method. POST methods always recommended whenever you do not want the browser to cache the form content.
