Understanding GET vs POST: How to Send Form Data

Introduction
Hello everyone! we’ll discuss what happens when you submit a form on a website. Specifically, we’ll dive into two commonly used HTTP methods—GET and POST—how they work, and when to use them.

The <form> element is your key to defining how data will be sent. Of its various attributes, the most significant are action and method.

The action attribute specifies the destination of the form data. It can be a relative or absolute URL. If not provided, the data will be sent to the form’s current page.

---

1. The Basics: Client/Server Architecture

When you submit a form, your browser (the client) sends a request to a web server using the HTTP protocol. The server processes this request and sends back a response, which could be anything from loading a new page to displaying a success message.
Forms act as a bridge, allowing users to send information like login credentials, search queries, or contact details to the server.

---

2. The Element: Defining How Data is Sent

In HTML, forms use two important attributes to control data transmission:

The action attribute specifies the destination of the form data. It can be a relative or absolute URL. If not provided, the data will be sent to the form’s current page. Here are examples illustrating different action URLs:

• Absolute URL:

    xml<form action="https://example.com">…</form>
  

• Relative URL:

    xml<form action="/somewhere_else">…</form>
  

• Default (same page):

    xml<form>…</form>
  

It’s important to note that using HTTPS ensures that the data is encrypted during transmission.

1. action: This specifies the server's URL where the form data will be sent.
   Example:

    <form action="https://example.com/submit">...</form>
   

2. method: This determines how the data is sent—either via GET or POST.

---

3. GET Method: Adding Data to the URL

The GET method sends data as part of the URL, appended as query parameters.
Here’s an example:

<form action="https://example.com/search" method="GET">
  <input name="query" value="hello" />
  <button type="submit">Search</button>
</form>

When you submit this form, the browser sends a request like:

GET /search?query=hello HTTP/2.0

Key Points about GET:

• Data is visible in the URL (not secure for sensitive information like passwords).

• Useful for search queries or bookmarking URLs.

• Limited data size due to URL length restrictions.

---

4. POST Method: Sending Data in the Request Body

With the POST method, data is sent in the body of the HTTP request instead of the URL.
Example:

<form action="https://example.com/login" method="POST">
  <input name="username" value="user" />
  <input name="password" value="pass" />
  <button type="submit">Login</button>
</form>

The server receives a request like this:

POST /login HTTP/2.0
Content-Type: application/x-www-form-urlencoded

username=user&password=pass

Key Points about POST:

• Data is hidden from the URL (better for sensitive information).

• Can handle larger amounts of data, such as file uploads.

---

5. When to Use GET vs. POST

• Use GET for non-sensitive, small amounts of data or when bookmarking/sharing URLs is needed.

• Use POST for sensitive data like passwords or when sending larger datasets.

  transmission of sensitive information.

  Comparing GET and POST

  

---

6. Viewing HTTP requests

1. Open the developer tools.

2. Select "Network"

3. Select "All"

4. Select "foo.com" in the "Name" tab

5. Select "Request" (Firefox) or "Payload" (Chrome/Edge)

You can then get the form data.

---

7. Security Considerations

Regardless of the method, always validate and sanitize data on the server. Key tips:

• Never send sensitive data like passwords via GET.

• Use HTTPS to encrypt data in transit.

• Implement proper server-side validation and escaping to prevent attacks like SQL injection or cross-site scripting (XSS).

---

8. A Quick Look at Server-Side Handling

Once the server receives the data, it processes it according to your code or framework. For example:

• In PHP, you access POST data like this:

    $username = htmlspecialchars($_POST['username']);
  

• In Python (Flask):

    username = request.form['username']
  

The choice of server-side technology depends on your project requirements.

---

9. Special Case: File Uploads

To send files, you must:

1. Use the POST method.

2. Set the enctype attribute to multipart/form-data.

3. Add <input type="file"> in your form.

Example:

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="upload">
  <button type="submit">Upload</button>
</form>

---

10. FlowChart

---

11. Conclusion

Sending form data is simple, but keeping an app secure can be challenging. Remember, a front-end developer shouldn't decide the data's security model. You can do client-side form validation, but the server can't rely on this validation because it can't be sure what actually happened on the client-side.

---