---
title: HTMLButtonElement
slug: Web/API/HTMLButtonElement
translation_of: Web/API/HTMLButtonElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p>Интерфейс HTMLButtonElement предоставляет свойства и методы для управления элементами {{HTMLElement("button")}} (помимо обычного интерфейса {{domxref("HTMLElement")}}, он также доступен - по наследованию) .</p>

<p>{{InheritanceDiagram(600, 120)}}</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>Форма этой кнопки связана с ней. Если кнопка потомок элемента формы, то этот атрибут ID этого элемента формы.<br>
    Если форма не связана с формой элемента, то атрибут может быть ID любой формы элемента в том же документе<code>, или значение null</code> если нет совпадений.</td>
  </tr>
  <tr>
   <td><code>formAction</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>URI ресурса, обрабатывающего информацию, отправленную кнопкой. Если задан, то переопределяет {{htmlattrxref("action", "form")}} атрибут {{HTMLElement("form")}} элемента, который является его владельцем.</p>
   </td>
  </tr>
  <tr>
   <td><code>formEncType</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Тип содержимого, используемый для отправки формы на серевер. Если указан этот атрибут, то он переопределяет {{htmlattrxref("enctype", "form")}} атрибут элемента {{HTMLElement("form")}}, который является владельцем этого элемента.</td>
  </tr>
  <tr>
   <td><code>formMethod</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>HTTP метод, который браузер использует для отправки формы. Если задан, тогда он  переопределяет {{htmlattrxref("method", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
   </td>
  </tr>
  <tr>
   <td><code>formNoValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>
    <p>Показывает что форма не будет проверена при отправке. Если задано, тогда переопределяет {{htmlattrxref("novalidate", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
   </td>
  </tr>
  <tr>
   <td><code>formTarget</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>Имя или ключевое слово, указывающее, где должен отображаться ответ, полученный после отправки формы. Если задано, тогда  переопределяет {{htmlattrxref("target", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
   </td>
  </tr>
  <tr>
   <td><code>labels</code> {{readonlyInline}}</td>
   <td>{{domxref("NodeList")}}</td>
   <td>Список элементов {{HTMLElement("label")}}, которые являются метками для этой кнопки.</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>
    <p>Имя объекта отправляемое с формой. {{HTMLVersionInline(5)}}Если задано, не должно быть пустой строкой.</p>
   </td>
  </tr>
  <tr>
   <td><code>tabIndex</code></td>
   <td>long</td>
   <td>
    <p>Номер, представляющий последовательность перехода между полями при нажатии на Tab</p>
   </td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>Указывает поведение кнопки. Это перечисляемый атрибут со следующими возможными значениями:</p>

    <ul>
     <li><code>"submit"</code>: Кнопка отправки формы. Это значение по умолчанию, если атрибут не определен, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.</li>
     <li><code>"reset"</code>: Кнопка сброса формы.</li>
     <li><code>"button"</code>: Кнопка с неопределенным действием.</li>
     <li><code>"menu"</code>:  Кнопка показывающая меню (экспериментальная). {{experimental_inline}}</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>validationMessage</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>A 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 (<code>willValidate</code> is <code>false</code>), or it satisfies its constraints.</p>
   </td>
  </tr>
  <tr>
   <td><code>validity</code> {{readonlyInline}}</td>
   <td>{{domxref("ValidityState")}}</td>
   <td>The validity states that this button is in.</td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The current form control value of the button.</td>
  </tr>
  <tr>
   <td><code>willValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Return Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>checkValidity()</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Not supported for button elements.</td>
  </tr>
  <tr>
   <td><code>setCustomValidity(in DOMString error)</code></td>
   <td><code>void</code></td>
   <td>Not supported for button elements.</td>
  </tr>
 </tbody>
</table>

<p>WIth Gecko-based browser, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class to style submit buttons based on the validation of a form.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>The following attribute has been added: <code>menu</code>.<br>
    The <code>type</code> attribute can take one more value, <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>The attributes <code>tabindex</code> and <code>accesskey</code>, are now defined on {{domxref("HTMLElement")}}.<br>
    The following attributes have been added: <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>, and <code>willValidate</code>.<br>
    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
    The <code>type</code> attribute is no more read-only.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>No change from {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Form-related attributes</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>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Form-related attributes</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="See_also">See also</h2>

<ul>
 <li>HTML element implementing this interface: {{ HTMLElement("button") }}</li>
</ul>