HTML Element: button


 

There are three types of type for a button element, thought they’re all displayed in exactly the same way by the browser:

  1. type=submit: Used to submit a form.

  2. type=reset: Used to reset a form.

  3. type=button: Used as a general button control (does nothing by default).

Example

Syntax

1
 
<button>Click me</button>

2
 


3
 
<button type="reset">Reset form</button>

4
 


5
 
<button type="submit">Submit</button>

Result

Browser Support

 

Attributes

The <button> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them). 

The <button> element also supports the following attributes:

  • type: Type of button – submit, reset, button

  • value: Value to be used for form submission

  • disabled: Whether the form control is disabled

  • form: Associates the element with a form element

  • formaction: URL to use for form submission

  • forenctype: Entry list encoding type to use for form submission

  • formmethod: Variant to use for form submission

  • formnovalidate: Bypass form control validation for form submission

  • formtarget: Navigable for form submission

  • name: Name of the element to use for form submission and in the form.elements API

Content

A <button> supports phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.

<button> elements are more flexible for styling than <input> elements. Other HTML elements (like <span>, <div>, <img> etc.) can be contained within them. ::after and ::before pseudo-elements can be used on them via CSS too.

In the example below you can see <svg> elements nested directly within the <button> elements (svg icons from the BeBold Essentials UI Icon Pack, available on Envato Elements):

Syntax

1
 
<button>

2
 
    <svg></svg>

3
 
    Button label

4
 
</button>

Result

Learn More

Did you know by using the form="" attribute on a <button> element you can identify and submit a form from outside the <form> element itself?



Source link