Progressively enhancing forms | Bramus

Developers seem to have invented a thousand different ways to avoid using HTML forms these days, which constantly makes me think we're all reinventing the wheel. Surely there's a simpler, more grounded way to capture form data that uses the foundations that HTML already provides us? Yep, there is: the FormData() API!

Bramus has done a great job of outlining the issue and solution in this post, which roughly boils down to this quote:

As FormData captures all the form’s key-value pairs, applying Progressive Enhancement on forms becomes pretty easy:
  1. Build a regular HTML form that submits its data to somewhere
  2. Make it visually interesting with CSS
  3. Using JavaScript, hijack the form’s submit event and, instead, send its contents — captured through FormData — using fetch() to the defined endpoint.

They also touch on how to convert the form data to JSON and some other quick tricks. The whole experiment can be seen on CodePen.

Explore Other Notes

⬅ Newer

You don't need a UI framework

An excellent overview from Josh of the pitfalls of using UI frameworks. I particularly enjoyed their focus on why developers often advocate for these tools, and how those needs are often …

Older ➡

The last tyrant

A beautifully animated and incredibly well-scored short film about the K/T extinction, and the legacy it left. Incredibly, this turns out to be the final in a series of animated …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Developers seem to have invented a thousand different ways to avoid using HTML forms these days, which constantly makes me think we're all reinventing the wheel. Surely there's a simpler, more …</p> </body> </html>
  • Murray Adcock.
Journal permalink