この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！
この記事を English (US) で読むこともできます。
The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLButtonElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
Inherits properties from its parent, HTMLElement.
HTMLButtonElement.accessKey- Is a
DOMStringindicating the single-character keyboard key to give access to the button. HTMLButtonElement.autofocus- Is a
Booleanindicating whether or not the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. HTMLButtonElement.disabled- Is a
Booleanindicating whether or not the control is disabled, meaning that it does not accept any clicks. HTMLButtonElement.formRead only- Is a
HTMLFormElementreflecting the form that this button is associated with. If the button is a descendant of a form element, then this attribute is the ID of that form element.
If the button is not a descendant of a form element, then the attribute can be the ID of any form element in the same document it is related to, or thenullvalue if none matches. HTMLButtonElement.formAction- Is a
DOMStringreflecting the URI of a resource that processes information submitted by the button. If specified, this attribute overrides theactionattribute of the<form>element that owns this element. HTMLButtonElement.formEnctype- Is a
DOMStringreflecting the type of content that is used to submit the form to the server. If specified, this attribute overrides theenctypeattribute of the<form>element that owns this element. HTMLButtonElement.formMethod- Is a
DOMStringreflecting the HTTP method that the browser uses to submit the form. If specified, this attribute overrides themethodattribute of the<form>element that owns this element. HTMLButtonElement.formNoValidate- Is a
Booleanindicating that the form is not to be validated when it is submitted. If specified, this attribute overrides thenovalidateattribute of the<form>element that owns this element. HTMLButtonElement.formTarget- Is a
DOMStringreflecting a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides thetargetattribute of the<form>element that owns this element. HTMLButtonElement.labelsRead only- Is a
NodeListthat represents a list of<label>elements that are labels for this button. HTMLButtonElement.menu- Is a
HTMLMenuElementrepresenting the menu element to be displayed if the button is clicked and is oftype="menu". HTMLButtonElement.name- Is a
DOMStringrepresenting the name of the object when submitted with a form. HTML5 If specified, it must not be the empty string. HTMLButtonElement.tabIndex- Is a
longthat represents this element's position in the tabbing order. HTMLButtonElement.type- Is a
DOMStringindicating the behavior of the button. This is an enumerated attribute with the following possible values:"submit": The button submits the form. This is the default value if the attribute is not specified, HTML5 or if it is dynamically changed to an empty or invalid value."reset": The button resets the form."button": The button does nothing."menu": The button displays a menu.
HTMLButtonElement.validationMessageRead only- Is a
DOMStringrepresenting the localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidateisfalse), or it satisfies its constraints. HTMLButtonElement.validityRead only- Is a
ValidityStaterepresenting the validity states that this button is in. HTMLButtonElement.value- Is a
DOMStringrepresenting the current form control value of the button. HTMLButtonElement.willValidateRead only- Is a
Booleanindicating whether the button is a candidate for constraint validation. It isfalseif any conditions bar it from constraint validation.
Methods
Inherits methods from its parent, HTMLElement.
| Name | Return Type | Description |
|---|---|---|
checkValidity() |
Boolean |
Not supported for button elements. |
setCustomValidity(in DOMString error) |
void |
Not supported for button elements. |
WIth Gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'HTMLButtonElement' in that specification. |
Living Standard | The following attribute has been added: menu.The type attribute can take one more value, "menu". |
| HTML5 The definition of 'HTMLButtonElement' in that specification. |
Recommendation | The attributes tabindex and accesskey, are now defined on HTMLElement.The following attributes have been added: autofocus, formAction, formEnctype, formMethod, formNoValidate, formTarget, labels, validity, validationMessage, and willValidate.The following methods have been added: checkValidity(), setCustomValidity().The type attribute is no more read-only. |
| Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLButtonElement' in that specification. |
Obsolete | No change from Document Object Model (DOM) Level 1 Specification. |
| Document Object Model (DOM) Level 1 Specification The definition of 'HTMLButtonElement' in that specification. |
Obsolete | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 1 | Yes | Yes | Yes |
accessKey | Yes | Yes | 1 | Yes | Yes | Yes |
autofocus | Yes | 12 | 1 | Yes | Yes | Yes |
disabled | Yes | 12 | 1 | Yes | Yes | Yes |
form | Yes | 12 | 4 | Yes | Yes | Yes |
formAction | Yes | 12 | 41 | Yes | Yes | Yes |
formEnctype | Yes | 12 | 4 | Yes | Yes | Yes |
formMethod | Yes | 12 | 4 | Yes | Yes | Yes |
formNoValidate | Yes | 12 | 4 | Yes | Yes | Yes |
formTarget | Yes | 12 | 4 | Yes | Yes | Yes |
labels | Yes | No | 56 | ? | ? | ? |
menu | No | No | No | No | No | No |
name | Yes | 12 | 1 | Yes | Yes | Yes |
tabIndex | Yes | Yes | 1 | Yes | Yes | Yes |
type | Yes | 12 | 1 | Yes | Yes | Yes |
validationMessage | Yes | 12 | 1 | Yes | Yes | Yes |
validity | Yes | 12 | 1 | Yes | Yes | Yes |
value | Yes | 12 | 1 | Yes | Yes | Yes |
willValidate | Yes | 12 | 1 | Yes | Yes | Yes |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
accessKey | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
autofocus | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
disabled | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
form | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
formAction | Yes | Yes | Yes | 41 | Yes | Yes | Yes |
formEnctype | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
formMethod | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
formNoValidate | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
formTarget | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
labels | Yes | Yes | No | 56 | ? | ? | Yes |
menu | No | No | No | No | No | No | No |
name | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
tabIndex | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
type | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
validationMessage | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
validity | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
value | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
willValidate | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
1. In Firefox 56, the implementation has been updated so that the formAction property returns the correct form submission URL, as per spec, when the associated button is being used to submit a form (bug 1366361).
See also
- HTML element implementing this interface:
<button>
ドキュメントのタグと貢献者
タグ:
このページの貢献者:
fscholz,
chrisdavidmills,
Sebastianz,
danmork,
trusktr,
arronei,
danielnixon,
erikadoyle,
jmsfwk,
slimsag,
linmx0130,
MHasan,
teoli,
kscarfone,
Sheppy,
ethertank,
timemachine3030,
volkmar,
jswisher
最終更新者:
fscholz,