HTML HTTP Methods

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.

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.

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.

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.

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.

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>