<button>: The Button element - HTML: HyperText Markup Language | MDN

2024.09.04 00:39

Skip to main content Skip to search Skip to select language Open main menu References References Overview / Web Technology

Web technology reference for developers

HTML

Structure of content on the web

CSS

Code used to describe document style

JavaScript

General-purpose scripting language

HTTP

Protocol for transmitting web resources

Web APIs

Interfaces for building web applications

Web Extensions

Developing extensions for web browsers

Web Technology

Web technology reference for developers

Guides Guides Overview / MDN Learning Area

Learn web development

MDN Learning Area

Learn web development

HTML

Learn to structure web content with HTML

CSS

Learn to style content using CSS

JavaScript

Learn to run scripts in the browser

Accessibility

Learn to make the web accessible to all

Plus Plus Overview

A customized MDN experience

AI Help

Get real-time assistance and support

Updates

All browser compatibility updates at a glance

Documentation

Learn how to use MDN Plus

FAQ

Frequently asked questions about MDN Plus

Curriculum Blog Tools New Playground

Write, test and share your code

New HTTP Observatory

Scan a website for free

AI Help

Get real-time assistance and support

Theme Log in Sign up for free References HTML Elements button Article Actions English (US) Español Français 日本語 한국어 Português (do Brasil) Русский 中文 (简体) 正體中文 (繁體) Filter sidebar Clear filter input

In this article

Try it Attributes Notes Accessibility Examples Technical summary Specifications Browser compatibility HTML Tutorials HTML basics Introduction to HTML Introduction to HTML overview Getting started with HTML What's in the head? Metadata in HTML HTML text fundamentals Creating hyperlinks Advanced text formatting Document and website structure Debugging HTML Assessment: Marking up a letter Assessment: Structuring a page of content Multimedia and embedding Multimedia and embedding overview Images in HTML Video and audio content From object to iframe — other embedding technologies Adding vector graphics to the web Responsive images Assessment: Mozilla splash page HTML tables HTML tables overview HTML table basics HTML table advanced features and accessibility Assessment: Structuring planet data References HTML elements a abbr acronym Deprecated address area article aside audio b base bdi bdo big Deprecated blockquote body br button canvas caption center Deprecated cite code col colgroup data datalist dd del details dfn dialog dir Deprecated div dl dt em embed fencedframe Experimental fieldset figcaption figure font Deprecated footer form frame Deprecated frameset Deprecated h1 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark marquee Deprecated menu meta meter nav nobr Deprecated noembed Deprecated noframes Deprecated noscript object ol optgroup option output p param Deprecated picture plaintext Deprecated portal Experimental pre progress q rb Deprecated rp rt rtc Deprecated ruby s samp script search section select slot small source span strike Deprecated strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track tt Deprecated u ul var video wbr xmp Deprecated Global attributes accesskey anchor Experimental Non-standard autocapitalize autofocus class contenteditable data-* dir draggable enterkeyhint exportparts hidden id inert inputmode is itemid itemprop itemref itemscope itemtype lang nonce part popover slot spellcheck style tabindex title translate virtualkeyboardpolicy Experimental writingsuggestions Attributes accept autocomplete capture crossorigin dirname disabled elementtiming for max maxlength min minlength multiple pattern placeholder readonly rel required size step input types input type="button" input type="checkbox" input type="color" input type="date" input type="datetime-local" input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" Guides Content categories Block-level elements Inline elements Quirks Mode and Standards Mode Date and time formats used in HTML Constraint validation Microdata Microformats Viewport meta tag Allowing cross-origin use of images and canvas

In this article

Try it Attributes Notes Accessibility Examples Technical summary Specifications Browser compatibility

button : The Button element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

Learn more See full compatibility Report feedback

The button HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS .

Try it

Attributes

This element's attributes include the global attributes .

autofocus

This Boolean attribute specifies that the button should have input focus when the page loads. Only one element in a document can have this attribute.

disabled

This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.

form

The form element to associate the button with (its form owner ). The value of this attribute must be the id of a form in the same document. (If this attribute is not set, the button is associated with its ancestor form element, if any.)

This attribute lets you associate button elements to form s anywhere in the document, not just inside a form . It can also override an ancestor form element.

formaction

The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.

formenctype

If the button is a submit button (it's inside/associated with a form and doesn't have type="button" ), specifies how to encode the form data that is submitted. Possible values:

application/x-www-form-urlencoded : The default if the attribute is not used. multipart/form-data : Used to submit input elements with their type attributes set to file . text/plain : Specified as a debugging aid; shouldn't be used for real form submission.

If this attribute is specified, it overrides the enctype attribute of the button's form owner.

formmethod

If the button is a submit button (it's inside/associated with a form and doesn't have type="button" ), this attribute specifies the HTTP method used to submit the form. Possible values:

post : The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials. get : The form data are appended to the form's action URL, with a ? as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects , like search forms. dialog : This method is used to indicate that the button closes the dialog with which it is associated, and does not transmit the form data at all.

If specified, this attribute overrides the method attribute of the button's form owner.

formnovalidate

If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.

This attribute is also available on input type="image" and input type="submit" elements.

formtarget

If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the name of, or keyword for, a browsing context (a tab, window, or iframe ). If this attribute is specified, it overrides the target attribute of the button's form owner. The following keywords have special meanings:

_self : Load the response into the same browsing context as the current one. This is the default if the attribute is not specified. _blank : Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings. _parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self . _top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self . name

The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.

popovertarget

Turns a button element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.

popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control button . Possible values are:

"hide"

The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.

"show"

The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.

"toggle"

The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control button.

type

The default behavior of the button. Possible values are:

submit : The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a form , or if the attribute is an empty or invalid value. reset : The button resets all the controls to their initial values, like input type="reset" . (This behavior tends to annoy users.) button : The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur. value

Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.

Notes

A submit button with the attribute formaction set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a form or set the attribute form to the id of the form.

button elements are much easier to style than input elements. You can add inner HTML content (think i , br , or even img ), and use ::after and ::before pseudo-elements for complex rendering.

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button . Otherwise, they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

While button type="button" has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using JavaScript , such as removing an item from a list.

By default, user agents style buttons as display: flow-root , which establishes a new block formatting context and centers the button's children both horizontally and vertically as long as they do not overflow. If the button is defined as a flex or grid container, the children will behave as flex or grid items. A button set to display: inline will be styled as if the value were set to display: inline-block .

Accessibility

Icon buttons

Buttons that only display an icon do not have an accessible name . Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree . Assistive technology then uses the accessibility tree to navigate and manipulate page content.

To give an icon button an accessible name, put text in the button element that concisely describes the button's functionality.

Examples

html button name = " favorite " svg aria-hidden = " true " viewBox = " 0 0 10 10 " path d = " M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z " / / svg Add to favorites / button

Result

If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

However, it is worth noting that leaving the button text visible can help people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially important for people who are not technologically sophisticated or who may have different cultural interpretations of the icon the button uses.

What is an accessible name? | The Paciello Group MDN Understanding WCAG, Guideline 4.1 explanations Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

Size and Proximity

Size

Interactive elements such as buttons should have an area large enough to be easy to activate. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1 Target Size and 2.5.5 | Adrian Roselli Quick test: Large touch targets - The A11Y Project

Proximity

Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.

Spacing may be created using CSS properties such as margin .

Hand tremors and the giant-button-problem - Axess Lab

ARIA state information

To describe the state of a button the correct ARIA attribute to use is aria-pressed and not aria-checked or aria-selected . To find out more read the information about the ARIA button role .

Button styles

It is best not to override the default focus ring for elements that have focus. If the button styles are overridden, it is important to ensure that the focus state has enough contrast so that people experiencing low vision conditions can perceive it and people with cognitive differences will understand it.

The :focus-visible pseudo-class can be used to apply styles to an element that has :focus only when the user agent's heuristics determine that the focus should be highlighted, such as when a button receives keyboard focus. See :focus vs :focus-visible for more information.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values to the background the button is placed on. To meet current Web Content Accessibility Guidelines (WCAG) , a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)

WebAIM: Color Contrast Checker MDN Understanding WCAG, Guideline 1.4 explanations Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Clicking and focus

Whether clicking on a button or input button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design .

Examples

html button name = " button " Press me / button

Technical summary

Content categories Flow content , phrasing content , Interactive content , listed , labelable , and submittable form-associated element, palpable content. Permitted content Phrasing content but there must be no Interactive content Tag omission None, both the starting and ending tag are mandatory. Permitted parents Any element that accepts phrasing content . Implicit ARIA role button Permitted ARIA roles checkbox , combobox , link , menuitem , menuitemcheckbox , menuitemradio , option , radio , switch , tab DOM interface HTMLButtonElement

Specifications

Specification HTML Standard
# the-button-element

Browser compatibility

BCD tables only load in the browser

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute .

This page was last modified on Jul 26, 2024 by MDN contributors .

View this page on GitHub • Report a problem with this content

Your blueprint for a better internet.

MDN on Mastodon MDN on X (formerly Twitter) MDN on GitHub MDN Blog RSS Feed

MDN

About Blog Careers Advertise with us

Support

Product help Report an issue

Our communities

MDN Community MDN Forum MDN Chat

Developers

Web Technologies Learn Web Development MDN Plus Hacks Blog Website Privacy Notice Cookies Legal Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation .
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license .