Buttons

A button is an element you press to do something: submit a form, open a window, add an item to the cart. HTML has the <button> tag for this. It works with the mouse, the keyboard and screen readers right away, with no extra code.

The button tag

The button text goes between the opening and closing tags:

<button>Press me</button>

The browser drew a button in the system style. You can click it with the mouse, or reach it with Tab and press Enter or the space bar.

Button types

The type attribute decides what a button does inside a form:

Type	What it does
`submit`	Submits the form — the default type
`reset`	Returns all form fields to their initial values
`button`	Does nothing by itself — JavaScript gives it an action

<form>
  <p><input name="name" value="Anna"></p>
  <button type="reset">Reset</button>
  <button type="button">Just a button</button>
</form>

Change the name and press Reset — the field goes back to Anna. A reset button is rarely useful: people press it by accident and lose everything they typed.

A button with an icon

Inside <button> you can put not only text but other inline elements too — an image, for example:

<button type="button">
  <img src="/icons/languages/python.png" alt="" width="16" height="16">
  Download Python
</button>

The image has an empty alt: the meaning of the button is already clear from its text. There is also an old way to make a button — <input type="submit" value="Send"> — but it can only hold text.

A disabled button

The disabled attribute switches a button off: it turns grey and ignores presses:

<button disabled>Place order</button>
<p><small>Add items to your cart.</small></p>

Explain next to it why the button is unavailable — otherwise the person will not know what to do.

Which button was pressed

A submit button can also have name and value. This is how the server learns which of several buttons submitted the form:

<form action="/post" method="post">
  <p><textarea name="text" rows="2">Post text</textarea></p>
  <button name="action" value="draft">Save draft</button>
  <button name="action" value="publish">Publish</button>
</form>

Pressing the second button sends action=publish along with the text.

A button or a link

A link <a> goes somewhere — to another page or part of one. A <button> does something on the current page. CSS can make them look the same, but the tag is chosen by the action: "Plan details" is a link, "Add to cart" is a button.

Common mistake

Inside a <form>, a button without type counts as a submit button. A "Show password" or "Add another field" button suddenly submits the form:

<form>
  <input type="password" value="secret">
  <button>Show password</button>          <!-- submits the form -->
  <button type="button">Show password</button> <!-- does not submit -->
</form>

Give every button in a form except the submit button an explicit type="button".

Thanks for reading!