# Buttons

A button's type decides what it does in a form, submit, reset or nothing at all, and a button with no type sends the form, which surprises people.

Apprentice · HTML · Web Development · Updated October 31, 2026

## After this lesson you can

- Choose the right type for a button in a form
- Predict what clicking a button or pressing Enter does in a form

## Key takeaways

- A `<button>` inside a form is a submit button unless its type says otherwise.
- type="submit" sends the form, type="reset" puts every box back to how the page loaded, and type="button" does nothing until JavaScript gives it a job.
- Write the type on every button, so nobody has to remember the default.
- Pressing Enter in a text box sends the form too. It's called implicit submission, and it needs a submit button to work reliably.
- An `<input type="submit">` sends a form as well, but its words go in its value and it can't hold anything else.

A doorbell and a light switch can look almost the same, but you'd be surprised if the light switch rang the bell. Buttons on a page are like that: they look alike, and what they do depends on one attribute. Get it wrong and you get one of the most common form bugs there is. Someone clicks "Preview my request", and the form sends itself, half finished. You'll meet this bug in your own forms and in other people's, so it pays to know exactly why it happens.

## The button element

A button is a `<button>` element. The words between its tags are what people see on it, so make them say what will happen:

```html
<button type="submit">Send my request</button>
```

"Send my request" tells the listener exactly what pressing it does. "Submit" or "OK" makes them guess. Because a `<button>` has a closing tag, it can also hold other elements, such as a small picture with its own alt text beside the words.

## Three types of button

A button's `type` attribute decides what it does when it's inside a form:

| `type` | What it does in a form |
|---|---|
| `submit` | Sends the form: the browser packs the answers and goes to the `action` |
| `reset` | Puts every box back to how it was when the page loaded |
| `button` | Nothing on its own. It waits for JavaScript to give it a job |

```html
<form action="received.html" method="get">
  <label for="song">Song</label>
  <input type="text" id="song" name="song">

  <button type="submit">Send my request</button>
  <button type="reset">Start over</button>
  <button type="button">Preview my request</button>
</form>
```

A **submit button** is the one a form can't do without. The `type="button"` kind is for things a script will do on the page, such as showing a preview, and the JavaScript in Depth course teaches that side if you want to go further.

## The default that surprises people

Leave the `type` off, and a button inside a form is a **submit button**. So this "Preview" button sends the form:

```html
<form action="received.html" method="get">
  <label for="song">Song</label>
  <input type="text" id="song" name="song">

  <button>Preview my request</button>
</form>
```

In a real run, typing "Yellow" and clicking **Preview my request** went straight to `received.html?song=Yellow`. With `type="button"`, the same click left the page where it was.

That's why the rule is: **write the `type` on every button.** Then the HTML says what each button does, and nobody has to remember the default.

One more trap: a button only sends the form it's inside. A button placed after the closing `</form>` tag sends nothing.

## Reset buttons rarely help

A **reset button** puts every box back to its starting point. That's not always empty: a box with a `value` attribute goes back to that value. In a real run, a box that started as "Your favorite song" was changed to "Yellow", and **Start over** put "Your favorite song" back.

Most forms today leave the reset button out. It sits right beside the submit button, and one slip of the mouse or thumb wipes out everything someone typed. People who want to start over can clear a box themselves.

## Pressing Enter: implicit submission

People don't always click the button. In a text box, pressing **Enter** sends the form too, as if they had clicked its submit button. That's called **implicit submission**, and keyboard users rely on it. Real runs in Chrome showed when it works:

| The form has | Enter in a text box |
|---|---|
| a submit button | sends the form |
| one text box and no submit button | sends the form |
| two or more text boxes and no submit button | does nothing |
| two or more text boxes and only a `type="button"` button | does nothing |

So a form needs a submit button, even if you expect people to press Enter.

**Try it.** Build the station's form with two text boxes and a submit button, open it with Live Server, type in a box and press **Enter**. The address bar shows your answers. Now change the button to `type="button"` and try again: Enter does nothing.

## \`&lt;input type="submit">\` or \`&lt;button>\`?

Older pages often make a submit button with an `<input>`. Its words go in its `value` attribute:

```html
<input type="submit" value="Send my request">
```

It sends the form exactly like `<button type="submit">`. The difference is what it can hold: an `<input>` is a void element, so it has only its `value` as plain words, never a picture or other elements. Both are correct; this course writes `<button type="submit">`, and you'll recognize the `<input>` kind when you meet it in someone else's code.

## Check yourself

2 questions to try on the lesson page.

## So what

One attribute decides whether a button sends, clears or waits. Write `type` on every button, keep a submit button in every form, and your forms do what people expect, with a mouse, a thumb or the Enter key.

## Key terms

- [&lt;button>](https://www.ask-codey.com/glossary/button)
- [Submit button](https://www.ask-codey.com/glossary/submit-button)
- [Reset button](https://www.ask-codey.com/glossary/reset-button)
- [Implicit submission](https://www.ask-codey.com/glossary/implicit-submission)

## Cheat sheets

- [Buttons](https://www.ask-codey.com/cheat-sheets/html-forms-buttons-cheat-sheet)

## Related

- [How a Form Sends Data](https://www.ask-codey.com/lessons/html-forms-how-a-form-sends-data)
- [Text Inputs and Labels](https://www.ask-codey.com/lessons/html-forms-text-inputs-and-labels)

Source: https://www.ask-codey.com/lessons/html-forms-buttons