HTML <button> Tag

The <button> tag creates a button that can perform a variety of tasks. A <button> is more flexible than an <input> because it can contain any type of content, such as text, icons, and images.

HTML Tag

Example

#

A <button> element. Clicking it opens an alert box.

<button type="button" 
        onclick="alert('Message has been sent.');">Send message</button>

Using <button>

The <button> tag creates a clickable button that can submit forms or perform other tasks.

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

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

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>

<script>
  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");
  }
</script>



Attributes for <button>

A complete list of <button> attributes.

Attribute Value Description
type button
submit
reset
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,
multipart/form-data,
text/plain
Only for type="submit", indicates how the submitted form data should be encoded.
formmethod get
post
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
_self
_parent
_top
framename
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>
</form>

Reset button

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

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

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, these tags 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:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides