HTML button form attribute

Thanks to my colleague Sam I recently learned about the form attribute on the <button> element.

By setting a form attribute, the button becomes a submit button for a form on the page with that ID, without having to nest the button on the page.

This could be useful for a logout link, used on different places.

<nav>
  <!-- … -->
  <button type="submit" form="logout">
    Log out
  </button>
</nav>
 
<footer>
  <!-- … -->
  <button type="submit" form="logout">
    Log out
  </button>
</footer>
 
<form id="logout" method="POST" action="/logout">
</form>

As I'm refactoring an existing design system, this article by Elise Hein came quit timely.

We consider HTML to be cheap, but wrapping divs in divs in divs comes with a cost that slowly creeps up.

Why avoid extra wrapper elements?

1. Bloated html hurts performance
2. Redundant elements can create problems with accessibility
3. Redundant elements can break styling
4. Deeply nested dom trees are annoying to work with