> Markdown version of [/magazine/666-5-tips-for-using-the-button-html-element](https://www.wearedevelopers.com/magazine/666-5-tips-for-using-the-button-html-element). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# 5 Tips for Using the <button> HTML Element

**By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)

**Published:** January 15, 2026

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](/magazine/664-stop-using-divs-five-input-types-you-could-use-right-away), 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](https://bsky.app/profile/wearedevelopers.bsky.social).



## Related Articles

- [Stop Using Divs: Five Input Types You Could Use Right Away](https://www.wearedevelopers.com/magazine/664-stop-using-divs-five-input-types-you-could-use-right-away)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Semantic HTML Elements You’re (Probably) Not Using But Should](https://www.wearedevelopers.com/magazine/667-semantic-html-elements-you-re-probably-not-using-but-should)
- [Spot the Mistakes: HTML Forms](https://www.wearedevelopers.com/magazine/577-spot-the-mistakes-html-forms)

## Related Videos

- [Making Interactions Accessible to All Users](https://www.wearedevelopers.com/videos/649-making-interactions-accessible-to-all-users)
- [Mastering Keyboard Accessibility](https://www.wearedevelopers.com/videos/820-mastering-keyboard-accessibility)
- [Semantic HTML means it's semantic, right? Right?](https://www.wearedevelopers.com/videos/1674-semantic-html-means-it-s-semantic-right-right)
- [Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements](https://www.wearedevelopers.com/videos/1247-tips-and-tricks-css-pseudo-class-selectors-and-pseudo-elements)

## Related Jobs

- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**