備忘録的プログラミングリファレンス

HTMLButtonElement インターフェイス

 HTMLButtonElement インターフェイスは、画像を取り込んだボタンやスタイルシートを摘要するといった汎用性を持った<form> のボタン部品である <button> エレメントを定義したインターフェイスです。
 このインターフェイスのプロパティメソッドイベントを定義しています。

HTMLButtonElement 継承図

プロパティ(Properties)

 HTMLButtonElement インターフェイスは 以下の独自のプロパティをもちます。HTMLElement インターフェイス のプロパティも継承しています。

プロパティ概要分類
.autofocusページの読み込み時にフォーカスをあてるか/否か。フォーカスがあたっている状態でページが表示される。Boolean 型
.disabledボタンとしての機能が無効になるか/否か。薄い色で表示される。Boolean 型
.formbutton エレメントが属する HTMLFormElement のハンドラー。なければ null
.formActionデータの送信先 URL 。<form> の送信先よりも優先される。DOMString 型
.formEnctype送信データの形式 enctype 属性のこと。 <form> の enctype 属性よりも優先される。 DOMString 型
.formMethod HTTP メソッド 'GET'、'POST' の設定。 <form> の method 属性よりも優先される。DOMString 型
.formNoValidateデータ送信時に値のチェックを行わないという設定。 <form> の novalidate 属性よりも優先される。Boolean 型
.formTarget返信されたレスポンスを表示する Window または iframe の指定。 <form> の target 属性よりも優先されるDOMString 型。
.labels関連付けられた <label> を NodeList で返す
.menu 関連付けられた <menu> を返す。 <menu> は <li> と併用したリスト表示のために使う
.tabIndexタブによるショートカットキーのフォーカス順を指定。long 型
.type 以下の機能を指定。DOMString 型
  • submit: フォームの送信
  • reset: フォームのリセット
  • button: 送信はしない。カスタム用
  • menu: メニュー表示
.willValidatereadonly または disabled ではないかを取得。データを送信する対象なら true を返す。 Boolean 型
.validationMessageエラーメッセージを取得。エラーがなければ null 。DOMString 型
.validityボタンの有効性を示す ValidityState オブジェクトを返す
.value送信される値を取得と設定。DOMString 型

 以下は、HTMLElement インターフェイスのプロパティと継承したプロパティです。参考にしてください。

Nodeのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

Elementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

メソッド(Methods)

 HTMLButtonElement インターフェイスは 以下の独自のメソッドがあります。さらに継承したメソッドがあります。

メソッド概要分類
checkValidity()データの検証を実行。エラーがある場合は invalid イベントが発生。検証範囲の設定が必要。type="reset"、"button" は非対応。 Boolean 型
reportValidity()データの検証を実行。エラーがある場合は invalid イベントが発生しメッセージを出力。検証範囲の設定が必要。type="reset"、"button" は非対応。 Boolean 型
setCustomValidity()データの検証エラーを任意に発生できる。引数が指定されるとエラー状態になる。引数を空文字 '' にすると終了。type="reset"、"button" は非対応。 void 型

 HTMLButtonElement インターフェイスが継承したHTMLElement インターフェイスのメソッドです。 NodeElement インターフェイスのメソッドを含みます。使えないものもあるので参考してください。

Nodeのメソッド一覧 

タイプ名(ハンドラー名)概要分類

Elementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

イベント(Event)

 HTMLButtonElement にイベントハンドラーを定義する方法には以下があります。

HTMLButtonElement.addEventListener( 'click', ()=>{...} )
HTMLButtonElement.onclick = function(){...}
<button onclick = "..." >

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

 以下は、HTMLButtonElement が継承しているイベント一覧です。使えないものもあるので参考にしてください。

GlobalEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

DocumentAndElementEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのイベント一覧 

タイプ名(ハンドラー名)概要分類