HTML <button> Tag

The <button> tag creates a clickable button.

Buttons can contain content, such as text, icons, images, etc.

Three button types are available: button, submit, and reset.



Clicking this <button> opens an alert box.

<button type="button"
        onclick="alert('Like has been saved!');">
        Like post &nbsp;<img src="/img/html/heart.png" />

Tip:  A <button> is more flexible than an <input> element because it can contain any type of content, such as text, icons, and images.

More Examples

A <button> of type button which, when clicked, starts a JavaScript process.
Note: Once started, the button is disabled to prevent running multiple processes at the same time.

<button id="starter" type="button" onclick="start()">Start process</button> 

<br /><br />
<progress id="progress-bar" value="0" max="100"></progress>

  let start = () => {      
      setInterval( () => {
          let value = document.getElementById("progress-bar").value;
          value = Math.min(value + .1, 100) % 100;
          document.getElementById("progress-bar").value = value;
      }, 10 );

      let button = document.getElementById("starter");
      button.setAttribute("disabled", "disabled");

Attributes for <button>

A complete list of <button> attributes.

Attribute Value Description
type button
Button's type
name name Defines a name for the button.
value text Initial value for the button
id   identifier Defines a unique identifier for the button.
class   classnames Sets one or more CSS classes to be applied to the button.
style   CSS-styles Sets the style for the button.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the button is hidden.
title   text Sets a title that displays as a tooltip.
tabindex   index Sets a tab sequence relative to the other elements.
disabled disabled Specifies whether the button is disabled
form form-id Tells the browser which forms the button belongs to.
formaction URL Only for type="submit", indicates where the submitted form data shall be sent.
formenctype application/x-www-form-urlencoded,
Only for type="submit", indicates how the submitted form data should be encoded.
formmethod get
Only for type="submit", indicates how the submitted form data will be sent.
formnovalidate Only for type="submit", indicates that form data should not be validated on submit.
formtarget _blank
Only for type="submit", indicates where the response should be displayed after form submission.
autofocus no value Button gets focused after page load

For additional global attributes see our global attributes list.

Submit button

A <button> of type submit. It will submit the form when clicked.

<form action="/tutorial/action.html">
  <input type="text" name="email" placeholder="Enter your email">
  <button type="submit">Submit</button>

Reset button

A <button> of type reset clears input controls to their original values.
Enter your email and then click reset.

  <input type="text" name="email" placeholder="Enter your email">
  <button type="reset">Reset</button>

Did you know?

Did you know?

Which is best: button or input?

The <button> element offers the same functionality as <input> -- specifically button, submit, and reset types. So which one is better?

The difference is that <input> is an empty element without content. The text on an <input> button is set with the value attribute and that is all you can do. 

On the other hand, a <button> accepts other elements such as text, icons, and images. So, with <button> you have more options to custom design the control.

Form Tags

The <button> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

Here is when <button> support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

Last updated on Sep 30, 2023