Using The Button Form Attribute To Create Standalone Buttons In HTML

A couple of years ago, when I was first learned about Hotwire Turbo, I noticed that it was using HTML attributes to override form submissions. And, that these Turbo techniques would often associate any button with any form using these attributes. Just recently, this got me wondering if such an approach would be helpful when styling buttons that should otherwise look like anchor links.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

Consider a list of links inside a <nav> element. Imagine that the last link in this list is a log-out link. Of course, since logging out is a mutation against the system state, it should be performed as a POST request, not a GET request. Generally, this would mean wrapping the log-out button inside a <form> tag.

The problem with this approach is that it gives the log-out button a different DOM (Document Object Model) structure; which makes styling the list of navigation elements more challenging. But, if we could let the log-out <button> stand on its own, just as we do with the <a> elements, styling would become much easier:

This CSS assumes that there's a single, flat list of child elements within the nav element. No worrying about a <form> tag that's there solely for the purposes of wrapping the <button>.

We can do this by using the [form] attribute on the <button> to point to a <form> element that is outside the <nav> container. In the following code, notice that the <nav> element contains a flat list of children, including the log-out button:

The [form=logOutForm] attribute on the log-out button tells the browser to use the button to submit the form that's farther down in the DOM. This simplifies the structure of the <nav> element while keeping the POST semantics of the log-out workflow.

If we click each element in the nav, we can see that they each work. Note that for the demo, I'm actually using a GET request on the form so that it works in GitHub Pages:

As you can see in the browser's network activity, clicking on the log-out button in the nav triggers a request to the server (again, I'm using GET here for the demo but this should be a POST for state mutations). By putting the button and its "parent" form in two different location, we keep all the same functionality but we make it easier to style the page.

Submit button don't only submit a form—they can also submit data along with that form by using [name] and [value] attributes. This got me wondering if we could use the same technique in a data grid. To explore, let's create a table in which each row has a delete button; but, each delete button will point to a single, shared form. We'll give each form submission a unique action by providing each button with a unique [value] attribute (which references the user ID associated with the given table row):

In this page, each button uses the [form] attribute in order to trigger submission of the shared deleteUser form element. But, each button provides a unique userID value to be submitted along with the form. If we now run this demo and click on each button, you'll see the following output:

Note: I've removed the confirm() call in the GIF in order to make it simpler to run through.

As you can see in the network activity, each of the buttons triggers submission of the same, shared form element. However, the [name] and [value] attributes on each button allows it to submit a unique user ID along with that form submission.

By moving the button outside of the form, we're not fundamentally changing any of the functionality of the page—we simply making parts of the page easier to style with CSS.

Considering a "ButtonTo()" Helper in ColdFusion Frameworks

Web frameworks like Ruby on Rails (RoR) and CFWheels (which is based on RoR) have helper methods, such as buttonTo(), for generating buttons that act like links. As discussed above, the issue presented by a <button> is that it's usually wrapped in a <form> element. So while a buttonTo() call might look like a linkTo() call, if it wraps the button in a form, it can create unexpected styling challenges.

These styling challenges can be somewhat mitigated by rendering the button and the form in two different locations on the page and then associating them via the [form] attribute:

Notice that each row in our users data-grid has both a linkTo() and buttonTo() call. Each of these helper functions renders a single element, which makes the UI much easier to style:

By allowing each buttonTo() call to share the same <form> element, we can move the form to the bottom of the page and allow only a single button to render in the original buttonTo() location. Again, this doesn't change the semantics of the page—it only makes the rendered elements easier to style.

Want to use code from this post? Check out the license.

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