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

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:

<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 
<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:

<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.

`<input type="submit">` or `<button>`?

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

<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

Cheat sheets

Related