Explain Codes LogoExplain Codes Logo

Should PUT and DELETE be used in forms?

web-development
ajax
restful-design
browser-compatibility
Nikita BarsukovbyNikita Barsukov·Mar 6, 2025
TLDR

Traditional HTML forms natively support only GET and POST methods. But we can simulate PUT and DELETE requests using either JavaScript to intercept the form submission and make AJAX calls or a hidden form field for middleware processing on the server.

Here's AJAX with fetch for a DELETE request:

document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); // Don't let the form go about business as usual fetch('/resource', { method: 'DELETE' }) // "You have no power here!" - Gandalf .then(res => res.json()) // Handle successful response .catch(err => console.error(err)); // Oops! Let's print some error logs });

And this is how you simulate PUT with a hidden field:

<form method="POST" action="/update-resource"> <input type="hidden" name="_method" value="PUT"> <!-- other magical form inputs go here... --> </form>

Server-side logic needs to account for the _method value to actually alter the HTTP verb.

When to use PUT and DELETE?

PUT and DELETE methods are inherent to RESTful design, yet they are not directly supported in HTML forms. But when used correctly (usually with AJAX), they can enhance your web application's efficiency and usability.

  • PUT for updating resources
  • DELETE for removing resources

Implementing these gives your operations consistency and idempotency, meaning running them repeatedly doesn't trigger additional side effects. Especially useful when the network is as reliable as a chameleon in a bag of skittles.

Middleware and server-side adaptations

Often, the most successful workaround for HTML forms' limitations in using PUT and DELETE methods is to mimic them using server-side middleware. This allows the server to gracefully handle the '_method' form field.

Middleware like method-override in Express.js and Ruby on Rails' built-in handling of _method helps in this transformation.

However, Jenkins is a butler, not a postman. So confirm that your server is configured to accept PUT and DELETE methods; otherwise, it may give you the cold shoulder.

Future-proofing your code

HTML specifications evolve faster than New York fashion week. Even though PUT and DELETE are not natively available now, keep updating your knowledge and closely follow the HTML5 specification for potential inclusion.

Libraries like jQuery significantly simplify handling AJAX, and if you're a fan of go-faster stripes, it's worth exploring the official jQuery.ajax() documentation.

Leveraging PUT and DELETE goes beyond just RESTful principles. They present a coherent semantic sense that can vastly improve your application structure and make it easier to maintain - no more code sewers!

The balancing act of practicality

It’s a trade-off. PUT and DELETE help software follow RESTful design architecture, but factors like browser support and implementation complexity must be weighed into your decision.

Advantages are:

  • Clarity: Each request represents a unique operation.
  • Maintainability: The codebase is easier to debug and update.
  • Compliance: Aligns with RESTful design principles.

Trade-offs involve:

  • Browser compatibility: Native form methods are limited to GET and POST.
  • Implementation: AJAX requires writing additional JavaScript code.
  • Server-side setup: Might need additional server-side configuration.

Tricks of the trade for ensuring smooth user experience include a redirect after AJAX operations, error handling, and static fallbacks for users with JavaScript disabled.