Scribd
Upload
7 views

HTTP-Methods-and-Their-Use-in-HTML-Forms

ICT

Uploaded by

Jan Erich D. Ortega
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTTP-Methods-and-Their-Use-in-HTML-Forms

ICT

Uploaded by

Jan Erich D. Ortega
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTTP Methods and Their Use in HTML Forms

What is HTTP?

HTTP (HyperText Transfer Protocol) is the foundation of communication on the web. It defines how data is
requested and transferred between clients (e.g., web browsers) and servers.

Common HTTP Methods

HTTP methods define the type of action to be performed on the server. The most commonly used
methods are:

1. GET

o Purpose: Retrieve data from the server.

o Characteristics:

▪ Data is sent as query parameters in the URL.

▪ Suitable for requests that do not modify server data.

▪ Caches easily and can be bookmarked.

o Example: https://example.com/search?q=study+guide

2. POST

o Purpose: Submit data to the server for processing.

o Characteristics:

▪ Data is sent in the request body, not visible in the URL.

▪ Commonly used for form submissions that modify server-side data (e.g., creating an
account).

o Example: Submitting login details.

3. PUT

o Purpose: Update existing resources or create new ones if they don’t exist.

o Characteristics:

▪ Replaces the target resource with the data sent in the request body.

o Example: Updating a user profile.

4. DELETE

o Purpose: Remove a resource from the server.

o Characteristics:

▪ Typically used for actions like deleting a blog post or user account.

5. HEAD

o Purpose: Similar to GET, but only retrieves headers (no body).

o Characteristics:

▪ Useful for checking if a resource exists or inspecting metadata.


6. PATCH

o Purpose: Partially update a resource.

o Characteristics:

▪ Modifies only the specified fields of a resource.

HTTP Methods in HTML Forms

HTML forms are a common way to interact with HTTP methods, particularly GET and POST.

HTML Form Basics

An HTML form uses the <form> element to collect user input. Key attributes include:

1. action: Specifies the URL where the form data will be sent.

o Example: <form action="/submit">

2. method: Specifies the HTTP method to use when sending form data.

o Example: <form method="POST">

Using GET in Forms

• When to Use:

o For simple searches or retrieving data without modifying server data.

o Example: Search bars.

• Behavior:

o Data is appended to the URL as query parameters.

• Example Code:

<form action="/search" method="GET">

<input type="text" name="query" placeholder="Search">

<button type="submit">Search</button>

</form>

o Resulting URL: /search?query=example

Using POST in Forms

• When to Use:

o When submitting sensitive or large amounts of data (e.g., passwords, forms with multiple
fields).

o For actions that modify server-side data.

• Behavior:

o Data is sent in the request body, not the URL.

• Example Code:

<form action="/submit" method="POST">


<input type="text" name="username" placeholder="Username">

<input type="password" name="password" placeholder="Password">

<button type="submit">Login</button>

</form>

Comparison of GET and POST

Feature GET POST

Data in URL Yes No

Data Size Limit Limited (URL length) Larger (request body)

Bookmarkable Yes No

Use Cases Fetching data Submitting forms

It is important that…

1. Use GET for idempotent requests where data is not modified.

2. Use POST for actions that change the server state or handle sensitive data.

3. Always validate and sanitize form data on the server side to prevent security issues (e.g., SQL
injection).

Further Reading

• MDN Web Docs: HTTP Methods

• MDN Web Docs: Using Forms

You might also like