Understand how the method attribute controls data transmission in HTML forms, specifically distinguishing between GET and POST requests.
What it is
The method attribute on an HTML <form> element specifies the HTTP method used to submit form data. The two primary values are get and post. This attribute determines how user input is packaged and sent to the server. Related terms include query strings (used by GET) and request bodies (used by POST).
Why it matters
- Data Visibility: GET exposes data in the URL, making it visible in browser history and logs, while POST hides data in the request body.
- Security: POST is preferred for sensitive information like passwords because data does not appear in the address bar.
- Caching: GET requests can be cached by browsers and servers; POST requests generally cannot.
- Length Limits: URLs have length limits, restricting GET data size, whereas POST has no practical limit on data volume.
- Idempotency: GET should only retrieve data without side effects, while POST is intended for operations that change server state.
Syntax or steps
Add the method attribute inside the opening <form> tag. Set its value to either "get" or "post". If omitted, the default is get.
<form action="/submit" method="post">
<!-- form fields -->
</form>Example
Below is a minimal login form using the POST method to securely transmit credentials.
<!DOCTYPE html>
<html>
<body>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>Explanation: The action="/login" defines where data goes. The method="post" ensures data is sent in the body. Input fields with name attributes ("username", "password") are paired with their values and transmitted upon submission.
Common mistakes
- Using GET for passwords: Never use
method="get"for sensitive data. It appears in the URL, exposing it to shoulder surfing and browser history. - Forgetting the
nameattribute: Inputs without anameattribute are ignored during submission, regardless of the method used. - Misunderstanding caching: Developers often expect POST results to be cacheable like GET pages. They are not, which affects performance strategies.
- Assuming POST is inherently secure: POST hides data from the URL but does not encrypt it. Always use HTTPS alongside POST for security.
When to use it
Choose the method based on the intent of the operation.
| Feature | GET | POST |
|---|---|---|
| Data Location | URL Query String | Request Body |
| Visibility | Visible in Address Bar | Hidden from Address Bar |
| Use Case | Search, Filtering, Retrieval | Login, Uploads, Creating Records |
| Bookmarkable | Yes | No |
Practice
Guided Exercise: Create a simple search form that uses the GET method. Ensure the input field has the name q. Submitting this form should append ?q=your_search_term to the URL.
Challenge: Modify the previous form to use POST instead. Observe how the URL remains unchanged after submission, assuming the server handles the redirect correctly.
Quick check
Question: Why is POST preferred over GET for submitting large amounts of text?
Answer: Because GET appends data to the URL, which has strict length limitations imposed by browsers and servers. POST sends data in the request body, allowing for much larger payloads.
Summary
The method attribute dictates how form data travels to the server. Use GET for retrieving data via visible, bookmarkable URLs, and use POST for sending hidden, potentially large, or sensitive data that modifies server state.