HTML HTTP Methods
In this page:
The GET Method
The GET method is used to retrieve data from a server. It is read-only and idempotent, meaning making multiple identical requests will return the same result without changing anything on the server.
Note: Since GET appends data to the URL, you can easily bookmark or share GET search result links.
Warning: Never use the GET method to transmit sensitive data like passwords, as they will be displayed openly in the browser address bar.
Example: The GET Method
<form action="/search" method="get">
<input type="text" name="q">
</form>The POST Method
The POST method is used to send data to a server to create or update a resource. The data is packaged securely inside the HTTP request body instead of being appended to the URL.
Note: Use the POST method for sensitive information, file uploads, or database-modifying actions.
Warning: POST requests are not cached and cannot be bookmarked by users.
Example: The POST Method
<form action="/upload" method="post">
<input type="file" name="file">
</form>The PUT Method
The PUT method is used to update an existing resource or create a new one if it does not exist. It is idempotent, meaning sending the same update multiple times will produce the exact same server state.
Note: Use PUT in your JavaScript fetch requests when performing full document or profile updates.
Warning: Web browsers do not support PUT natively inside standard HTML forms; you must trigger it using custom JavaScript.
Example: The PUT Method
<script>
fetch('/api/profile/1', { method: 'PUT', body: JSON.stringify({ name: 'Alex' }) });
</script>The DELETE Method
The DELETE method is used to permanently remove a specified resource from the server. Like PUT, it must be triggered using JavaScript fetch requests as it is not supported natively by HTML forms.
Note: Use DELETE requests in your scripts to remove files or user records permanently.
Warning: Ensure your server requires strict authentication before executing any DELETE requests to prevent unauthorized data loss.
Example: The DELETE Method
<script>
fetch('/api/records/5', { method: 'DELETE' });
</script>Choosing GET vs. POST for Forms
Selecting between GET and POST depends on the nature of your form. GET is perfect for non-sensitive search queries as it allows users to bookmark and share results. POST is essential for logins, registration, and file uploads, as it keeps data secure and hidden.
Note: As a rule of thumb, use GET to retrieve data and POST to submit or modify data.
Warning: Using GET to transmit files or password keys will fail due to URL length limits and security risks.
Example: Choosing GET vs. POST for Forms
<form action="/search" method="get">
<input type="text" name="q">
</form>
<form action="/register" method="post">
<input type="password" name="password">
</form>- Using the public GET method to transmit sensitive data like passwords.
- Attempting to write PUT or DELETE methods inside standard HTML form tags, which is not supported natively.
- Forgetting that POST requests cannot be cached or bookmarked by users.
- HTTP methods tell the server exactly what type of action the browser wants to perform on a resource.
- Use GET to fetch non-sensitive data cleanly, and POST to transmit sensitive data and files securely.
- Use JavaScript fetch requests to trigger PUT and DELETE methods, which are not supported natively by HTML forms.
GET and POST are supported natively by all HTML forms; PUT and DELETE require JavaScript support.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: