path: root/devdocs/html/element%2Fbutton.html

<header><h1>&lt;button&gt;: The Button element</h1></header><div class="section-content">
<p>The <code>&lt;button&gt;</code> <a href="../index">HTML</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">form</a> or opening a dialog.</p> <p>By default, HTML buttons are presented in a style resembling the platform the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> runs on, but you can change buttons' appearance with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/button.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>This Boolean attribute specifies that the button should have input <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">focus</a> when the page loads. <strong>Only one element in a document can have this attribute.</strong></p> </dd> <dt id="autocomplete">
<a href="#autocomplete"><code>autocomplete</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
</dt> <dd> <p>This attribute on a <a href="button" aria-current="page"><code>&lt;button&gt;</code></a> is nonstandard and Firefox-specific. Unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">Firefox persists the dynamic disabled state</a> of a <a href="button" aria-current="page"><code>&lt;button&gt;</code></a> across page loads. Setting <code>autocomplete="off"</code> on the button disables this feature; see <a href="https://bugzil.la/654072" target="_blank">Firefox bug 654072</a>.</p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.</p> <p>Firefox, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persists the dynamic disabled state</a> of a <a href="button" aria-current="page"><code>&lt;button&gt;</code></a> across page loads. To control this feature, use the <a href="#autocomplete"><code>autocomplete</code></a> attribute.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The <a href="form"><code>&lt;form&gt;</code></a> element to associate the button with (its <em>form owner</em>). The value of this attribute must be the <code>id</code> of a <code>&lt;form&gt;</code> in the same document. (If this attribute is not set, the <code>&lt;button&gt;</code> is associated with its ancestor <code>&lt;form&gt;</code> element, if any.)</p> <p>This attribute lets you associate <code>&lt;button&gt;</code> elements to <code>&lt;form&gt;</code>s anywhere in the document, not just inside a <code>&lt;form&gt;</code>. It can also override an ancestor <code>&lt;form&gt;</code> element.</p> </dd> <dt id="formaction"><a href="#formaction"><code>formaction</code></a></dt> <dd> <p>The URL that processes the information submitted by the button. Overrides the <a href="form#action"><code>action</code></a> attribute of the button's form owner. Does nothing if there is no form owner.</p> </dd> <dt id="formenctype"><a href="#formenctype"><code>formenctype</code></a></dt> <dd> <p>If the button is a submit button (it's inside/associated with a <code>&lt;form&gt;</code> and doesn't have <code>type="button"</code>), specifies how to encode the form data that is submitted. Possible values:</p> <ul> <li>
<code>application/x-www-form-urlencoded</code>: The default if the attribute is not used.</li> <li>
<code>multipart/form-data</code>: Used to submit <a href="input"><code>&lt;input&gt;</code></a> elements with their <a href="input#type"><code>type</code></a> attributes set to <code>file</code>.</li> <li>
<code>text/plain</code>: Specified as a debugging aid; shouldn't be used for real form submission.</li> </ul> <p>If this attribute is specified, it overrides the <a href="form#enctype"><code>enctype</code></a> attribute of the button's form owner.</p> </dd> <dt id="formmethod"><a href="#formmethod"><code>formmethod</code></a></dt> <dd> <p>If the button is a submit button (it's inside/associated with a <code>&lt;form&gt;</code> and doesn't have <code>type="button"</code>), this attribute specifies the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP method</a> used to submit the form. Possible values:</p> <ul> <li>
<code>post</code>: 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.</li> <li>
<code>get</code>: The form data are appended to the form's <code>action</code> URL, with a <code>?</code> as a separator, and the resulting URL is sent to the server. Use this method when the form <a href="https://developer.mozilla.org/en-US/docs/Glossary/Idempotent">has no side effects</a>, like search forms.</li> <li>
<code>dialog</code>: This method is used to indicate that the button closes the <a href="dialog">dialog</a> with which it is associated, and does not transmit the form data at all.</li> </ul> <p>If specified, this attribute overrides the <a href="form#method"><code>method</code></a> attribute of the button's form owner.</p> </dd> <dt id="formnovalidate"><a href="#formnovalidate"><code>formnovalidate</code></a></dt> <dd> <p>If the button is a submit button, this Boolean attribute specifies that the form is not to be <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validated</a> when it is submitted. If this attribute is specified, it overrides the <a href="form#novalidate"><code>novalidate</code></a> attribute of the button's form owner.</p> <p>This attribute is also available on <a href="input/image"><code>&lt;input type="image"&gt;</code></a> and <a href="input/submit"><code>&lt;input type="submit"&gt;</code></a> elements.</p> </dd> <dt id="formtarget"><a href="#formtarget"><code>formtarget</code></a></dt> <dd> <p>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 <code>name</code> of, or keyword for, a <em>browsing context</em> (a tab, window, or <a href="iframe"><code>&lt;iframe&gt;</code></a>). If this attribute is specified, it overrides the <a href="form#target"><code>target</code></a> attribute of the button's form owner. The following keywords have special meanings:</p> <ul> <li>
<code>_self</code>: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.</li> <li>
<code>_blank</code>: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings.</li> <li>
<code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> <li>
<code>_top</code>: 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 <code>_self</code>.</li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of the button, submitted as a pair with the button's <code>value</code> as part of the form data, when that button is used to submit the form.</p> </dd> <dt id="popovertarget"><a href="#popovertarget"><code>popovertarget</code></a></dt> <dd> <p>Turns a <code>&lt;button&gt;</code> element into a popover control button; takes the ID of the popover element to control as its value. See the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> landing page for more details.</p> </dd> <dt id="popovertargetaction"><a href="#popovertargetaction"><code>popovertargetaction</code></a></dt> <dd> <p>Specifies the action to be performed on a popover element being controlled by a control <code>&lt;button&gt;</code>. Possible values are:</p> <dl> <dt id="hide"><a href="#hide"><code>"hide"</code></a></dt> <dd> <p>The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.</p> </dd> <dt id="show"><a href="#show"><code>"show"</code></a></dt> <dd> <p>The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.</p> </dd> <dt id="toggle"><a href="#toggle"><code>"toggle"</code></a></dt> <dd> <p>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 <code>popovertargetaction</code> is omitted, <code>"toggle"</code> is the default action that will be performed by the control button.</p> </dd> </dl> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The default behavior of the button. Possible values are:</p> <ul> <li>
<code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <code>&lt;form&gt;</code>, or if the attribute is an empty or invalid value.</li> <li>
<code>reset</code>: The button resets all the controls to their initial values, like <a href="input/reset">&lt;input type="reset"&gt;</a>. (This behavior tends to annoy users.)</li> <li>
<code>button</code>: 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.</li> </ul> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>Defines the value associated with the button's <code>name</code> 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.</p> </dd> </dl>
</div>
<h2 id="notes">Notes</h2>
<div class="section-content">
<p>A submit button with the attribute <code>formaction</code> set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a <code>&lt;form&gt;</code> or set the attribute <code>form</code> to the id of the form.</p> <p><code>&lt;button&gt;</code> elements are much easier to style than <a href="input"><code>&lt;input&gt;</code></a> elements. You can add inner HTML content (think <code>&lt;i&gt;</code>, <code>&lt;br&gt;</code>, or even <code>&lt;img&gt;</code>), and use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> pseudo-elements for complex rendering.</p> <p>If your buttons are not for submitting form data to a server, be sure to set their <code>type</code> attribute to <code>button</code>. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.</p> <p>While <code>&lt;button type="button"&gt;</code> has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, such as removing an item from a list.</p>
</div>
<h2 id="examples">Examples</h2>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="fxFQJFyFhflmEdSct++i7bs/cbDIRUJu0N2AeDlIUtY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Press me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect1">

<iframe class="sample-code-frame" title="Examples" id="frame_example" width="200" height="64" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/button/runner.html?id=example" loading="lazy"></iframe>
</div>
</div>
<h2 id="accessibility_concerns">Accessibility concerns</h2>

<h3 id="icon_buttons">Icon buttons</h3>
<div class="section-content">
<p>Buttons that only show an icon to represent do not have an <em>accessible name</em>. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">an accessibility tree</a>. Assistive technology then uses the accessibility tree to navigate and manipulate page content.</p> <p>To give an icon button an accessible name, put text in the <code>&lt;button&gt;</code> element that concisely describes the button's functionality.</p> <h4 id="examples_2">Examples</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="zA72NpmjryYAvRYFasQLfMUJz0VwfnORWtrStpYNIJQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favorite<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 10 10<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span>
  Add to favorites
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h5 id="result">Result</h5>
<div class="code-example" id="sect2">

<iframe class="sample-code-frame" title="Icon buttons sample" id="frame_icon_buttons" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/button/runner.html?id=icon_buttons" loading="lazy"></iframe>
</div> <p>If you want to visually hide the button's text, an accessible way to do so is to use <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" target="_blank">a combination of CSS properties</a> to remove it visually from the screen, but keep it parsable by assistive technology.</p> <p>However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.</p> <ul> <li><a href="https://www.tpgi.com/what-is-an-accessible-name/" target="_blank">What is an accessible name? | The Paciello Group</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_%E2%80%94_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html" target="_blank">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> </ul>
</div>
<h3 id="size_and_proximity">Size and Proximity</h3>
<div class="section-content">
<h4 id="size">Size</h4> <p>Interactive elements such as buttons should provide an area large enough that it is easy to activate them. 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 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" target="_blank">CSS pixels</a> is recommended.</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html" target="_blank">Target Size and 2.5.5 | Adrian Roselli</a></li> <li><a href="https://www.a11yproject.com/posts/large-touch-targets/" target="_blank">Quick test: Large touch targets - The A11Y Project</a></li> </ul> <h4 id="proximity">Proximity</h4> <p>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.</p> <p>Spacing may be created using CSS properties such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> <li><a href="https://axesslab.com/hand-tremors/" target="_blank">Hand tremors and the giant-button-problem - Axess Lab</a></li> </ul>
</div>
<h3 id="aria_state_information">ARIA state information</h3>
<div class="section-content"><p>To describe the state of a button the correct ARIA attribute to use is <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed"><code>aria-pressed</code></a> and not <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked"><code>aria-checked</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected"><code>aria-selected</code></a>. To find out more read the information about the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">ARIA button role</a>.</p></div>
<h3 id="firefox">Firefox</h3>
<div class="section-content">
<p>Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner"><code>button::-moz-focus-inner { }</code></a>.</p> <p>If overridden, it is important to <strong>ensure that the state change when focus is moved to the button is high enough</strong> that people experiencing low vision conditions will be able to perceive it.</p> <p>Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Web Content Accessibility Guidelines (WCAG)</a>, 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>bold</code></a> or larger, or 24px or larger.)</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAIM: Color Contrast Checker</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul>
</div>
<h3 id="clicking_and_focus">Clicking and focus</h3>
<div class="section-content"><p>Whether clicking on a <a href="button" aria-current="page"><code>&lt;button&gt;</code></a> or <a href="input"><code>&lt;input&gt;</code></a> 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 <a href="https://webkit.org/b/22261" target="_blank">Safari does not, by design</a>.</p></div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">Interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_content">form-associated</a> element, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a> but there must be no <a href="../content_categories#interactive_content">Interactive content</a> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML Standard <br><small># the-button-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>button</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">≤15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>autocomplete</code></th>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
</tr>
<tr>
<th><code>disabled</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>form</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>formaction</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">37</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>formenctype</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">10.6</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">37</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>formmethod</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">37</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>formnovalidate</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>formtarget</code></th>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">5.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>name</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>type</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>value</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button</a>
  </p>
</div>