aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/htmlbuttonelement
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlbuttonelement
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/htmlbuttonelement')
-rw-r--r--files/zh-cn/web/api/htmlbuttonelement/index.html293
1 files changed, 293 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlbuttonelement/index.html b/files/zh-cn/web/api/htmlbuttonelement/index.html
new file mode 100644
index 0000000000..c186ced221
--- /dev/null
+++ b/files/zh-cn/web/api/htmlbuttonelement/index.html
@@ -0,0 +1,293 @@
+---
+title: HTMLButtonElement
+slug: Web/API/HTMLButtonElement
+tags:
+ - API
+ - HTML DOM
+translation_of: Web/API/HTMLButtonElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLButtonElement</code></strong> 接口提供操作button元素 (除了 {{HTMLElement("button")}} 对象,这个接口对继承了该对象的元素也有效)的属性和方法。</p>
+
+<h2 id="属性">属性</h2>
+
+<p><em>从父对象{{domxref("HTMLElement")}}继承的属性。</em></p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">名字</th>
+ <th scope="col">类型</th>
+ <th scope="col">描述</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>accessKey</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>一个键盘字符构成的字符串,表明用哪个键盘字符能够访问这个按钮。</td>
+ </tr>
+ <tr>
+ <td><code>autofocus</code></td>
+ <td>{{domxref("Boolean")}}</td>
+ <td>这个控件是否可以在页面加载时自动得到焦点。但用户选择了其他焦点除外。只有和表单关联的按钮该特性才有效。</td>
+ </tr>
+ <tr>
+ <td><code>disabled</code></td>
+ <td>{{domxref("Boolean")}}</td>
+ <td>这个控件是否被禁用。被禁用的控件不接受任何输入和点击。</td>
+ </tr>
+ <tr>
+ <td><code>form</code> {{readonlyInline}}</td>
+ <td>{{domxref("HTMLFormElement")}}</td>
+ <td>这个按钮所关联的表单元素。如果这个按钮是一个表单元素的后代元素,那么这个属性的值就是那个表单元素。<br>
+ 如果这个按钮不是一个表单元素的后代元素,那么这个数学可以是任意同文档中的表单元素,或者是 <code>null</code> 表明它没有关联任何表单。</td>
+ </tr>
+ <tr>
+ <td><code>formAction</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>一个处理提交信息的URI资源地址。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("action", "form")}} 属性。</td>
+ </tr>
+ <tr>
+ <td><code>formEncType</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>表单要提交给服务器处理的内容的类型。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("enctype", "form")}} 属性。</td>
+ </tr>
+ <tr>
+ <td><code>formMethod</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>浏览器提交表单内容的HTTP方法。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("method", "form")}}属性。</td>
+ </tr>
+ <tr>
+ <td><code>formNoValidate</code></td>
+ <td>{{domxref("Boolean")}}</td>
+ <td>表明这个表单提交时是否需要验证。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("novalidate", "form")}}属性。</td>
+ </tr>
+ <tr>
+ <td><code>formTarget</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>一个名字或关键字,用于表明显示服务器响应的页面。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("target", "form")}}属性。</td>
+ </tr>
+ <tr>
+ <td><code>labels</code> {{readonlyInline}}</td>
+ <td>{{domxref("NodeList")}}</td>
+ <td>一个{{HTMLElement("label")}} 元素表,说明哪些标签是归属这个button的。</td>
+ </tr>
+ <tr>
+ <td><code>menu</code> {{experimental_inline}}</td>
+ <td>{{domxref("HTMLMenuElement")}}</td>
+ <td>如果该按钮<code>type="menu"</code>,被点击的时候应该显示的菜单。</td>
+ </tr>
+ <tr>
+ <td><code>name</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>提交到服务器时表单描述该对象的name。 {{HTMLVersionInline(5)}} 如果指定该属性,不能使用空字符串 。</td>
+ </tr>
+ <tr>
+ <td><code>tabIndex</code></td>
+ <td>long</td>
+ <td>用于表示该元素在tab按钮跳动过程中的序号的一个数字。</td>
+ </tr>
+ <tr>
+ <td><code>type</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>表明按钮的行为。这个属性是枚举类型,可以是以下的值:
+ <ul>
+ <li><code>"submit"</code>: 这个按钮会提交表单。如果不指定该属性,这是默认值。{{HTMLVersionInline(5)}} 中可以动态改为空值或者无效值。</li>
+ <li><code>"reset"</code>: 用于重置(清空)表单。</li>
+ <li><code>"button"</code>: 什么都不做的按钮。通常通过Javascript挂载事件。</li>
+ <li><code>"menu"</code>: 显示菜单的按钮 {{experimental_inline}}。</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>validationMessage</code> {{readonlyInline}}</td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>报告该控件不满足验证要求的,提示给用户的看的信息。如果这个控件没有验证约束(<code>willValidate</code>值为<code>false</code>),或者满足验证的要求,那么这个属性为空字符串。</td>
+ </tr>
+ <tr>
+ <td><code>validity</code> {{readonlyInline}}</td>
+ <td>{{domxref("ValidityState")}}</td>
+ <td>这个控件当前的验证状态。</td>
+ </tr>
+ <tr>
+ <td><code>value</code></td>
+ <td>{{domxref("DOMString")}}</td>
+ <td>这个控件当前的表单值。</td>
+ </tr>
+ <tr>
+ <td><code>willValidate</code></td>
+ <td>{{domxref("Boolean")}}</td>
+ <td>表明这个按钮是否需要在提交前进行验证。如果不需要,这个属性值为<code>false</code> 。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="方法">方法</h2>
+
+<p><em>从父对象{{domxref("HTMLElement")}}继承的方法。</em></p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">名字</th>
+ <th scope="col">返回类型</th>
+ <th scope="col">描述</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>checkValidity()</code></td>
+ <td>{{domxref("Boolean")}}</td>
+ <td>对按钮元素不支持。</td>
+ </tr>
+ <tr>
+ <td><code>setCustomValidity(in DOMString error)</code></td>
+ <td><code>void</code></td>
+ <td>对按钮元素不支持。</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>在基于Gecko的浏览器中,在表单验证时会使用{{cssxref(":-moz-submit-invalid")}} 伪类修饰提交按钮。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">规范</th>
+ <th scope="col">状态</th>
+ <th scope="col">注释</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>新添加的属性: <code>menu</code>。<br>
+ <code>type</code> 属性可以使用的新的值<code>"menu"</code>。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>属性<code>tabindex</code> 和<code>accesskey</code>被定义在{{domxref("HTMLElement")}}中。<br>
+ 添加了下列属性:<code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>和 <code>willValidate</code>。<br>
+ 添加了下列方法:<code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
+ <code>type</code> 属性不再是只读的。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
+ <td>{{Spec2('DOM2 HTML')}}</td>
+ <td>和 {{SpecName("DOM1")}}一样</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+ <td>{{Spec2('DOM1')}}</td>
+ <td>最初的定义。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>特性</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>基本支持</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(1.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>与表单相关的属性</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(2.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>labels</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}} {{unimplemented_inline(556743)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>特性</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>基本支持</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile(1.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>与表单相关的属性</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(2.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>labels</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}{{unimplemented_inline(556743)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>实现该接口的HTML元素:{{ HTMLElement("button") }}</li>
+</ul>