HTML Buttons: button Types submit, reset and button

Buttons let people do something: submit a form, open a menu, play a video, add an item to a cart. The <button> element is the right tool for all of these.

The three button types#

<form action="/profile" method="post">
  <p><label>Name <input name="name" value="Asha"></label></p>
  <button type="submit">Save</button>
  <button type="reset">Undo changes</button>
  <button type="button">Does nothing yet</button>
</form>

Change the name, then try each button.

Button content#

Unlike <input>, a <button> has content between its tags, so it can contain text, images and icons:

<button type="button">
  <img src="/lesson-assets/mango.svg" alt="" width="20" height="20"> Add mango to cart
</button>

The icon has alt="" because the button text already says what it does. If a button shows only an icon, give it an accessible name, for example with aria-label="Close".

input type="submit"#

You will see older code using <input> for buttons:

<input type="submit" value="Send">

It works, but it can only contain plain text from its value. <button> is more flexible and is the usual choice today.

Disabled buttons#

disabled greys out the button and stops it working:

<button type="submit" disabled>Place order</button>

Disabled buttons cannot be focused, so keyboard and screen reader users may not find them at all, and nobody is told why they cannot continue. Often it is clearer to leave the button enabled and show a helpful message when the user tries to continue with a problem.

Buttons or links?#

Each element comes with the correct keyboard behaviour: links activate with Enter, buttons with Enter or Space. Styling a link to look like a button is fine, as long as it still goes somewhere.

A button outside its form#

The form attribute connects a button (or any field) to a form by the form's id, even when it is placed elsewhere in the page:

<form id="search-form" action="/search">
  <input name="q" aria-label="Search">
</form>
<!-- somewhere else on the page -->
<button type="submit" form="search-form">Search</button>

Practice#

<form action="/login" method="post">
  <p><label>Username <input name="username" autocomplete="username"></label></p>
  <p>
    <label>Password <input type="password" name="password" autocomplete="current-password"></label>
    <button type="button">Show password</button>
  </p>
  <button type="submit">Log in</button>
</form>

Key takeaway#