The submission method (method) of a form

Form Submission Methods (method)

The form submission method determines how data is sent from the client to the server. HTML forms primarily specify two submission methods through the method attribute: GET and POST. These two methods differ significantly in terms of data transmission, security, use cases, and more.

GET Method

GET is the default submission method for forms. When using the GET method, form data is appended to the URL and sent to the server as a query string. This method is suitable for retrieving data but not for submitting sensitive information or large amounts of data.

<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search content">
  <button type="submit">Search</button>
</form>

After submission, the URL will look something like this: /search?q=keyword. Characteristics of GET requests include:

• Data is visible in the URL
• Has length limitations (approximately 2048 characters)
• Can be cached
• Can be bookmarked
• Should not be used for sensitive data

POST Method

The POST method sends form data in the HTTP request body, which is not displayed in the URL. This method is suitable for submitting sensitive information or large amounts of data.

<form action="/login" method="POST">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

Characteristics of POST requests include:

• Data is not visible in the URL
• No length limitations
• Cannot be cached
• Cannot be bookmarked
• Suitable for sensitive data

Other HTTP Methods

Besides GET and POST, HTML forms theoretically support other HTTP methods like PUT and DELETE, but in practice, these require JavaScript or frameworks to implement:

// Using the Fetch API to send a PUT request
document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const response = await fetch(e.target.action, {
    method: 'PUT',
    body: formData
  });
  // Handle the response
});

Criteria for Choosing a Method

When choosing between GET and POST, consider the following factors:

1. Data Security: Sensitive data must use POST
2. Data Size: Large amounts of data should use POST
3. Operation Nature: Use GET for retrieving data, POST for modifying data
4. Cacheability: Results that need caching should use GET
5. Idempotency: GET is idempotent, POST is not

Practical Examples

A typical use case is a user registration form:

<form action="/register" method="POST" enctype="multipart/form-data">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <input type="file" name="avatar">
  <button type="submit">Register</button>
</form>

A search function, however, is better suited for GET:

<form action="/products" method="GET">
  <input type="text" name="search" placeholder="Search products">
  <select name="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="clothing">Clothing</option>
  </select>
  <button type="submit">Search</button>
</form>

Security Considerations

While POST is more secure than GET, neither is completely secure:

• GET data appears in browser history and server logs
• POST data is not in the URL but is still transmitted in plaintext
• Important operations should use HTTPS encryption
• Sensitive operations should include CSRF protection

<!-- POST form with CSRF token -->
<form action="/transfer" method="POST">
  <input type="hidden" name="_csrf" value="random_token">
  <input type="text" name="amount">
  <input type="text" name="account">
  <button type="submit">Transfer</button>
</form>

Evolution in Modern Web Applications

With the rise of Single Page Applications (SPAs), form submission methods have evolved. Modern frontend frameworks often use AJAX to submit forms:

// Submitting a form using axios
document.getElementById('myForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('/api/data', new FormData(e.target));
    console.log(response.data);
  } catch (error) {
    console.error('Submission failed', error);
  }
});

Performance Optimization Tips

For optimizing form submission performance:

1. GET requests can be cached and are suitable for infrequently changing data
2. Large file uploads should use POST with chunked transfer
3. Consider using the FormData object for file uploads
4. Add debounce mechanisms to frequently submitted forms

// Form submission with debounce
let submitTimer;
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  clearTimeout(submitTimer);
  submitTimer = setTimeout(() => {
    e.target.submit();
  }, 500);
});

Browser Compatibility Notes

Different browsers may handle form methods differently:

• Older versions of IE have stricter URL length limits
• Some mobile browsers may limit GET request sizes
• File uploads must use the POST method
• Some browsers cache GET request results

<!-- Prevent GET requests from being cached -->
<form action="/data" method="GET">
  <input type="hidden" name="_" value="<%= Date.now() %>">
  <!-- Other form fields -->
</form>