Member-only story
I Ignored These HTML Attributes for Years
AI still writes JavaScript for these. One HTML attribute does it.
Ask an AI assistant for a modal and you’ll often get a state variable, a click handler, an Escape listener, and some code to move focus in and out. Thirty-odd lines that work fine.
The browser can do all of it with two attributes on a button.
I’ve written about popover menus and about <dialog> and <details> before.
Read Free for non-members.
What I missed, even while writing those, were the HTML attributes around them, the ones that delete the last bits of JavaScript I was still writing.
This post is about those, plus the form attributes I ignored for years. Every section has a live CodePen demo you can open on your phone.
Modals without a click handler
Even after switching to <dialog>, I still opened it from a click handler that called showModal(). That handler is optional now, and this is the attribute I’d most like more people to know about.
<button commandfor="confirm" command="show-modal">Delete account</button>
<dialog id="confirm">
<p>This can't be undone.</p>
<form method="dialog">
<button value="cancel">Cancel</button>…
