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 […]
  • 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 […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.