Which Button Should You Use? A Simple Guide for Beginners

Buttons are more complex than they appear.

HTML actually gives you three main types of buttons—each with a specific job. Using the wrong one can lead to weird behavior, especially in forms.

Let’s walk through them one by one.

1. type="submit"

This is the default one. If you don’t declare a button’s type, the browser assumes it’s a submit.

(click on the image to open in a new tab)

When clicked, this triggers the form’s submission. That means it collects all the form data and send it to the URL defined in the action attribute. If you’re building any kind of form—contact, signup, survey—you’ll probably want a submit button.

Note: In forms, every button acts like a submit unless told otherwise. That’s why you should always be explicit about the type.

2. type="reset"

As the name suggests, this one clears all inputs back to their default values.

Type reset buttons erase everything you have just typed.

(click on the image to open in a new tab)

You won’t use it often. Most users don’t expect or want a button that erases everything they just typed. Still, it has its place—maybe on internal tools or admin dashboards, where quick resets are useful.

3. type="button"

This goes hand in hand with JavaScript. No submission or reset occurs.

Using “button” as the input type disables the default form submission action, since “submit” is the default button type, so you can skip using preventDefault in JavaScript.

For a button with the type of button the above code would be unnecessary.

(click on the image to open in a new tab)

So its main job is to make working with JavaScript easier.

Buttons with the type button are used for custom logic. They go hand in hand with JavaScript.

(click on the image to open in a new tab)

Use this when you need a button for custom logic—opening a modal, toggling a menu, or running a script. It’s safe to use inside forms too, since it won’t interfere with form behavior.

Wrapping Up

HTML gives us three types of buttons each one suitable for a specific job.

Here’s a quick rule of thumb:

Submit: When you’re submitting a form use submit.
Reset: If you want to clear everything use reset.
Button: For everything else—modals, popups, dynamic stuff—this is the right type.

Always write out the type attribute. Browsers make false assumptions when you don’t.

Although my blog doesn’t support comments, feel free to reply via email or X.