HTTP Methods

Common HTTP Methods

<a href="page.html">Link</a>
<form method="GET">...</form>

<form method="POST">
    <input type="text">
    <input type="submit">
</form>

// JavaScript example
fetch('/api/user/123', {
    method: 'PUT',
    body: JSON.stringify(data)
})

// JavaScript example
fetch('/api/user/123', {
    method: 'DELETE'
})

🔹 GET Method

GET is used to retrieve data from the server. It's the default method for links and forms without a method attribute.

<!-- Links use GET by default -->
<a href="products.html">View Products</a>
<a href="search.php?q=html">Search for HTML</a>

<!-- Forms can use GET -->
<form method="GET" action="search.php">
    <input type="text" name="q" placeholder="Search...">
    <input type="submit" value="Search">
</form>

<!-- Results in: search.php?q=user+input -->

🔹 POST Method

POST is used to send data to the server, typically for creating or updating resources.

<!-- Contact form using POST -->
<form method="POST" action="contact.php">
    <input type="text" name="name" placeholder="Your Name">
    <input type="email" name="email" placeholder="Your Email">
    <textarea name="message" placeholder="Your Message"></textarea>
    <input type="submit" value="Send Message">
</form>

<!-- Login form using POST -->
<form method="POST" action="login.php">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="Login">
</form>

🔹 Other HTTP Methods

While HTML forms only support GET and POST, other methods are used in web APIs:

🔸 PUT Method

<script>
// Update user profile
fetch('/api/users/123', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'John Doe',
        email: '[email protected]'
    })
});
</script>

🔸 DELETE Method

<script>
// Delete a post
fetch('/api/posts/456', {
    method: 'DELETE'
})
.then(response => {
    if (response.ok) {
        console.log('Post deleted successfully');
    }
});
</script>

🔸 PATCH Method

<script>
// Partially update user
fetch('/api/users/123', {
    method: 'PATCH',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        email: '[email protected]'
    })
});
</script>

🔹 Method Override in HTML

Since HTML forms only support GET and POST, you can use hidden fields to simulate other methods:

<!-- Simulate PUT method -->
<form method="POST" action="update-user.php">
    <input type="hidden" name="_method" value="PUT">
    <input type="text" name="name" value="Current Name">
    <input type="submit" value="Update">
</form>

<!-- Simulate DELETE method -->
<form method="POST" action="delete-post.php">
    <input type="hidden" name="_method" value="DELETE">
    <input type="hidden" name="post_id" value="123">
    <input type="submit" value="Delete Post" 
           onclick="return confirm('Are you sure?')">
</form>

🔹 Choosing the Right Method

Use this guide to select the appropriate HTTP method: