We’ve all heard the trope of a developer cutting corners to use a <div> when a <button>, <input> or perhaps a semantic landmark would have been more appropriate.
With this in mind, and after looking at why we should probably use an <input> in a recent article, we thought we’d take a look at why <button> is more than just a label for a clickable element, and share five tips and tricks for using it.
1. Don’t forget button, submit, and reset
By default, a <button> inside a form behaves as type="submit". This catches a lot of people out and is one of the most common causes of accidental form submissions, but you can take control of this by using the <button>'s built-in types:
<button type="button">Just a button</button>
<button type="submit">Submit form</button>
<button type="reset">Reset form</button>
If you ever attach JavaScript to a button inside a form, explicitly setting type="button" not only avoids unintended submits, but it also makes the expected behaviour obvious to anyone reading the code later (including you).
2. A button can submit any form using form
One strange little quirk, but one that is actually quite useful a lot of time is that a button doesn’t need to live inside a <form> to submit it.
By using the form attribute, you can associate a button with any form on the page via its id, even if it’s elsewhere in the DOM.
<form id="profile-form">
<input type="text" name="name" placeholder="Your name">
</form>
<button type="submit" form="profile-form">Save Profile</button>
This is especially useful in component-based layouts and UI frameworks, where visual structure and DOM structure aren’t always as clean as we’d like.
3. Buttons can override how a form is submitted
You can control your form in more granual ways if you attach different submission behaviour to different buttons, without needing branching logic in JavaScript. Attributes like formaction and formmethod apply only to the button being clicked, not the entire form.
<form method="POST" action="/save">
<input type="text" name="title">
<button type="submit">Save</button>
<button
type="submit"
formaction="/publish"
formmethod="POST">
Publish
</button>
</form>
This pattern works particularly well in dashboards, CMS interfaces, and admin tools where a single form supports multiple actions.
4. Buttons can override encoding, validation, and targets
Buttons can also control how data is encoded, whether validation runs, and where the result opens. These overrides apply only to that specific button press.
<button
type="submit"
formaction="/upload"
formenctype="multipart/form-data"
formtarget="_blank"
formnovalidate>
Upload Without Validation
</button>
Using these attributes avoids custom JavaScript just to handle edge cases like uploads, previews, or alternative submission flows.
5. <button> > <input type="submit"> > <div>
It’s incredibly rare to come across an <input type="submit">, likely because of limited styling compared to a <button>, and the fact it’s limited to text-only via its value.
However, this, and a <button> element are both still favourable over a <div>, because they are focusable, keyboard-operable, and announced correctly by screen readers, resulting in them being considerable more accessibly by default.
If you’ve been relying on clickable <div>s or minimal submit inputs, switching to <button> can instantly improve accessibility, simplify your code, and unlock form behaviour you might not have realised existed.
We hope you found this article useful, be sure to let us know what you think on Bluesky.