Understanding GET vs. POST in Forms

Lecture Lab Workbook:

Post and GET are encoding types available in HTML forms.
One or the other of the enctype encoding methods will be used to package up the form field data in the Form, for shipment to the server, to be used as STDIN standard input for the program that will run to process the form data.

Objective: This workbook aims to teach the fundamental differences between the GET and POST methods when dealing with HTML forms, providing hands-on examples to clarify these concepts.


When dealing with forms in web development, it's crucial to understand how data is sent from the client to the server.
The two primary methods to achieve this are GET and POST.
These methods determine how data is packaged and sent, impacting security, data length, and the user experience.

Part 1: The GET Method


The GET method sends form data appended to the URL: url encoding and url rewriting as we see on of the field name/value pairs.
The information is visible to the user (appearing in the address bar), making it more suitable for non-sensitive data.


Bookmarkable: Since data is in the URL, users can bookmark the exact state.
Shareable: Users can share the URL to let others see the same results.
Cached: Browsers can cache the resulting page for faster access.


Length Limitation: URLs have a length limit (about 2000 characters in most browsers), restricting the amount of data you can send.
Security: Not suitable for sensitive data like passwords, as it's visible in the URL and stored in browser history.

Hands-On Example:

HTML Code (get_form.html):

<form action="view_get_data.html" method="get">
Name: <input type="text" name="username"><br>
Email: <input type="text" name="useremail"><br>
<input type="submit" value="Submit">

User Action: Enter John as the Name and as the Email.
Resultant URL: view_get_data.html?username=John&

Part 2: The POST Method


The POST method sends form data in the body of the HTTP request (which means the form data is conveyed between network endpoints in the TCP pipe setup by the TCP stack between the end points. This data is not appended to the URL and is not visible to users.


Security: Suitable for sensitive data since the information is not exposed in the URL.
No Length Limitation: Allows for a larger amount of data to be sent than GET.
No Data Type Limitation: Can send binary data or serialized objects.


Not Bookmarkable: Since data isn't in the URL, users can't bookmark the exact state.
Not Shareable: URLs won't contain the form data, so sharing the URL won't share the form's state.

Hands-On Example:

HTML Code (post_form.html):
htmlCopy code
<form action="view_post_data.html" method="post">
Name: <input type="text" name="username"><br>
Password: <input type="password" name="userpassword"><br>
<input type="submit" value="Submit">

User Action: Enter John as the Name and myPassword123 as the Password.
Resultant URL: view_post_data.html (Notice there's no form data in the URL.)

Part 3: Lab Activity

Experiment with Both Methods:
Create two HTML forms: one using GET and the other using POST.
Examine the URL after submitting both forms. Notice the visibility of form data for GET.
Security Implication Analysis:
Use the GET form to send a hypothetical password. Notice how this could be a security risk.
Use the POST form for the same password. Observe the differences.

Part 4: Key Takeaways

Use GET for data retrieval where no data needs to be updated on the server.
Use POST for submitting form data or uploading a file.
For security reasons, never use GET to send sensitive data (like passwords).
Understand that while POST conceals data from the URL, it doesn't encrypt it. Always use HTTPS for encrypted transmission.


Understanding when to use GET or POST is a fundamental aspect of web development.
Making the right choice can impact user experience, data integrity, and the security of your applications. Use the guidelines and exercises in this workbook to make informed decisions in your projects.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.