<ボタン> 要素

<button> 要素は HTMLButtonElement インターフェイスを継承します。次のインスタンス プロパティがあります。

(1)HTMLButtonElement.accessKey

HTMLButtonElement.accessKey プロパティは、キーボード上の対応するキーを表す文字列を返します。ボタンは、Alt + this key によってフォーカスできます。このプロパティは読み取りおよび書き込み可能です。

(2)HTMLButtonElement.autofocus

HTMLButtonElement.autofocus プロパティは、ページの読み込み中にボタンが自動的にフォーカスを取得するかどうかを示すブール値です。このプロパティは読み取りおよび書き込み可能です。

(3)HTMLButtonElement.disabled

HTMLButtonElement.disabled プロパティは、ボタンが無効かどうかを示すブール値です。このプロパティは読み取りおよび書き込み可能です。

(4)HTMLButtonElement.form

HTMLButtonElement.form プロパティはフォーム要素であり、ボタンが配置されているフォームを返します。このプロパティは読み取り専用です。ボタンがどのフォームにも属していない場合、このプロパティは「null」を返します。

(5)HTMLButtonElement.formAction

HTMLButtonElement.formAction は、フォーム送信の URL を表す文字列を返します。このプロパティは、値が設定されると、読み取りおよび書き込み可能になります。ボタンをクリックすると、<form> 要素で指定された URL ではなく、このプロパティで指定された URL に送信されます。

(6)HTMLButtonElement.formEnctype

HTMLButtonElement.formEnctype プロパティは、サーバーに送信されるデータのエンコード タイプを示す文字列です。この属性は、値が設定されると、読み取りおよび書き込み可能になります。ボタンをクリックすると、<form> 要素で指定されたエンコーディングではなく、この属性で指定されたエンコーディングが使用されます。

この属性は次の値を取ることができます。

• application/x-www-form-urlencoded (デフォルト)
• multipart/form-data (アップロードされたファイルのエンコーディング)
• テキスト/プレーン

(7)HTMLButtonElement.formMethod

HTMLButtonElement.formMethod プロパティは、ブラウザがフォームを送信するために使用する HTTP メソッドを表す文字列です。この属性は読み取りおよび書き込み可能であり、値が設定されると、クリックされたときに <form> 要素で指定されたエンコード方式ではなく、この属性で指定された HTTP メソッドが使用されます。

(8)HTMLButtonElement.formNoValidate

HTMLButtonElement.formNoValidate プロパティは、ボタンをクリックしてフォームを送信するときにフォーム検証ステップをスキップするかどうかを示すブール値です。この属性は、一度設定すると、<form> 要素の novalidate 属性をオーバーライドします。

(9)HTMLButtonElement.formTarget

HTMLButtonElement.formTarget プロパティは、フォームの送信後にサーバーから返されたコンテンツをどのウィンドウに表示するかを指定する文字列です。この属性は、一度設定すると、<form> 要素の target 属性をオーバーライドします。

(10)HTMLButtonElement.labels

HTMLButtonElement.labels は、ボタンがバインドされている <label> 要素を表す NodeList インスタンスを返します。このプロパティは読み取り専用です。

/* HTMLコードは以下の通り
  <label id="label1" for="test">ラベル 1</label>
  <button id="test">ボタン</button>
  <label id="label2" for="test">ラベル 2</label>
*/

const button = document.getElementById('test');

for(var i = 0; i < button.labels.length; i++) {
  console.log(button.labels[i].textContent);
}
// 「ラベル 1」
// 「ラベル 2」

上記のコードでは、2 つの <label> 要素が <button> 要素にバインドされています。 button.labels は、これら 2 つの <label> 要素を返します。

(11)HTMLButtonElement.name

HTMLButtonElement.name プロパティは、ボタン要素の name プロパティを表す文字列です。 name 属性が設定されていない場合は、空の文字列が返されます。このプロパティは読み取りおよび書き込み可能です。

(12)HTMLButtonElement.tabIndex

HTMLButtonElement.tabIndex は、ボタン要素のタブ オーダーを表す整数です。このプロパティは読み取りおよび書き込み可能です。

(13)HTMLButtonElement.type

HTMLButtonElement.type プロパティは、ボタンの動作を表す文字列です。この属性は読み取りおよび書き込み可能であり、次の値を取ることができます。

• submit: デフォルト値。フォームの送信を示します。
• reset: フォームをリセットします。
• button: デフォルトの動作はありません。

(14)HTMLButtonElement.validationMessage

HTMLButtonElement.validationMessage プロパティは、検証が失敗したときに表示されるプロンプト メッセージを表す文字列です。このプロパティは読み取り専用です。

(15)HTMLButtonElement.validity

HTMLButtonElement.validity プロパティは、ボタンの検証状態 (ValidityState) を返します。このプロパティは読み取り専用です。

(16)HTMLButtonElement.value

HTMLButtonElement.value プロパティは、ボタンにバインドされた値を返します。このプロパティは読み取りおよび書き込み可能です。

(17)HTMLButtonElement.willValidate

HTMLButtonElement.willValidate プロパティは、フォームの送信時にボタンが検証されるかどうかを示すブール値です。デフォルトは false です。このプロパティは読み取り専用です。