You Can CMD+Click To Submit A Form To A New Browser Tab

In the past couple of months, I've been digging into the HTMX JavaScript framework as a way to layer dynamic client-side functionality on top of my ColdFusion applications. I'm enamored with HTMX; but, unlike as with other frameworks such as Angular or Svelte, HTMX doesn't want to be an end-to-end holistic solution. Which means, I—as the developer—have to make a lot of decisions about where logic should live; and, whether or not something is a good idea. This is turning out to be a lot harder than I first imagined.

As I'm going through all of these thought experiments, I'm keeping one bright North Star in mind: don't break the web. Meaning, no matter what I do, I shouldn't create an experience that is counter-intuitive to the way users understand the web to work.

As a "web user" myself, I have a lot of sympathy for my "clients". Nothing grinds my gears more than when I'm trying to use a web application and it just doesn't do the thing that I expect it to do. For example, if I hit the Back Button, and I'm taken to an unexpected page, I'm just done—I'll literally rage-quit using the site (if I have an option to do so).

This is why, as I'm exploring HTMX, I don't take these decisions lightly. Last week, I outlined the functional requirements of a modal window. I did this so that I am fully aware of every compromise that I make when attempting to build a modal window into an HTMX and ColdFusion application.

But, a modal window is a relatively complex and advanced mechanism. Clicking links and submitting forms, on the other hand, is straight forward. Or, is it?!.

Many users know that you can CMD+Click (on Mac) to open a link in a new browser tab. But, did you know that you can CMD+Click (on Mac) to open a form submission in a new browser tab?

This works on Chrome, Edge, and Safari (but not on Firefox).

This is important to understand in the context of HTMX and ColdFusion because if you:

• Attempt to hx-boost a form submission.
• Add an hx-post to a form element.

... then, this native browser behavior stops working.

If you're coming from an Angular (or similar) background, this might not seem like a big deal. After all, Angular has to intercept the form submission because it's translating it into an API call in the client-side application logic.

But, the point of HTMX (as I understand it) is to work with the grain of the browser and hypermedia—to leverage "the platform" as much as possible. Which means, if I "boost" a form submission in some way, I'm explicitly making a decision to work against the grain of the browser.

Now, I'm not here to say that you shouldn't do this. I'm only saying that it's a choice that you are making, whether or not you realize it. And, I just want to realize that this is a decision I'm making if and when I need to make it.

I'm doing all of these thought experiments in HTMX and ColdFusion because I want to be an educated consumer. And, I want to understand how my application architecture choices affect the user experience (UX). And, where I might be sacrificing UX in favor of developer ergonomics and reduced application complexity.

Short link: https://bennadel.com/4805