HTTP Methods & Messages (Basics for Forms/APIs)

Badar KhalilUpdated September 27, 2026 2 min read

HTTP Methods & Messages (Basics for Forms/APIs)

Understanding HTTP methods is essential for anyone working with HTML forms or building API-driven web apps. This guide covers the core HTTP methods — GET, POST, PUT, PATCH, DELETE — and explains how HTTP request and response messages are structured.

What Is HTTP?

HTTP (HyperText Transfer Protocol) is the foundation of data exchange on the web. Every time a browser loads a page, submits a form, or calls an API, it sends an HTTP request and receives an HTTP response back from the server.

1. Common HTTP Methods

Method	Purpose
GET	Retrieves data from the server without changing it; used for loading pages and fetching resources
POST	Sends new data to the server, commonly used for form submissions and creating records
PUT	Replaces an existing resource entirely with new data
PATCH	Partially updates an existing resource
DELETE	Removes a resource from the server
HEAD	Same as GET but returns only headers, no body
OPTIONS	Asks the server which methods/headers are allowed for a resource

2. HTTP Methods in HTML Forms

The <form> element's method attribute controls whether form data is sent via GET (appended to the URL) or POST (sent in the request body). Forms only natively support GET and POST — other methods like PUT/DELETE require JavaScript.

3. Anatomy of an HTTP Request

Part	Description
Request Line	Contains the method, path, and HTTP version (e.g. GET /users HTTP/1.1)
Headers	Key-value pairs with metadata like Content-Type, Authorization
Body	The actual data sent, used with POST/PUT/PATCH requests

4. Anatomy of an HTTP Response

Part	Description
Status Line	Contains the HTTP version and status code (e.g. HTTP/1.1 200 OK)
Headers	Metadata about the response like Content-Type, Cache-Control
Body	The actual returned content — HTML, JSON, images, etc.

5. Common HTTP Status Codes

Code	Meaning
200 OK	Request succeeded
201 Created	Resource successfully created (common after POST)
301/302	Redirect to another URL
400 Bad Request	Server couldn't understand the request
401 Unauthorized	Authentication required
404 Not Found	Requested resource doesn't exist
500 Internal Server Error	Something went wrong on the server

6. HTTP Methods in APIs (Fetch Example)

Modern APIs rely heavily on these HTTP methods to perform CRUD operations (Create, Read, Update, Delete) using JavaScript's fetch() function or libraries like Axios.

Try It Yourself

Explore the live code examples below to see HTTP methods used in real forms and API calls.

Try it Yourself HTML

<form method='POST' action='/submit-form'>
  <label for='email'>Email:</label>
  <input type='email' id='email' name='email' required>
  <button type='submit'>Submit</button>
</form>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
})
.then(response => response.json())
.then(data => console.log('Created:', data))
.catch(error => console.error('Error:', error));

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

fetch('https://api.example.com/users/5', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('User deleted successfully');
  }
});

Output

Press Run to execute.

Exercise: Send a PUT RequestJAVASCRIPT

Write a fetch() call that sends a PUT request to 'https://api.example.com/users/10' updating the user's name to 'Sarah'. Log the response as JSON.

Try it Yourself JAVASCRIPT

fetch('https://api.example.com/users/10', {
  method: '',
  headers: {},
  body: ''
})
.then(response => response.json())
.then(data => console.log(data));

Output

Press Run to execute.

Show expected output

A fetch call configured with method: 'PUT' and a JSON body containing the updated name.

This is a self-check — compare your result with the expected output above.

Was this page helpful?