<input type="button"> - HTML

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

`value なしのボタン`

value を指定しなかった場合は、無印のボタンになります。

html

`ボタンの使用`

要素には既定の動作がありません（親戚であるやは、それぞれフォームの送信とリセットに使用されます）。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。

`基本的なボタン`

基本的なボタンに click イベントハンドラーを設定し、マシンを起動させましょう（つまり、ボタンの value と続く段落の文字列コンテンツを切り替えます）。

html マシンが停止しています。 js const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "マシンを起動") { button.value = "マシンを停止"; paragraph.textContent = "マシンが起動しています！"; } else { button.value = "マシンを起動"; paragraph.textContent = "マシンが停止しています。"; } } このスクリプトは DOM でを表す HTMLInputElement オブジェクトの参照を受け取り、この参照を変数 button に保存します。addEventListener() は、ボタンに click イベントが発生したときに実行される関数を設定します。

`ボタンへのショートカットキーの追加`

ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どのでも同じですが、 accesskey グローバル属性を使用します。

この例では、 s がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、 s と特定の修飾キーの組み合わせが必要です。その一覧については accesskey を参照してください)。 html マシンが停止しています。 const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "マシンを起動") { button.value = "マシンを停止"; paragraph.textContent = "マシンが起動しています！"; } else { button.value = "マシンを起動"; paragraph.textContent = "マシンが停止しています。"; } } メモ: 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。

`ボタンの無効化と有効化`

ボタンを無効にするには、次のように disabled グローバル属性を指定するだけです。

html disabled 属性の設定実行時に disabled に true または false を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと button.disabled = true を使用して無効化されます。それから setTimeout() 関数を使用して、2 秒後にボタンの状態を有効の状態にリセットしています。 html js const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() { button.disabled = true; button.value = "Disabled"; setTimeout(() => { button.disabled = false; button.value = "Enabled"; }, 2000); } disabled 状態の継承 disabled 属性が指定されなかった場合、ボタンは disabled の状態を親要素から継承します。これによって、複数の要素を要素のようなコンテナーの中に入れ、コンテナーに disabled を設定することで、一括で有効化したり無効化したりすることができます。以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときに disabled 属性がに設定され、2 秒経過するまで 3 つのボタンがすべて無効になります。 html Button group js const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() { fieldset.disabled = true; setTimeout(() => { fieldset.disabled = false; }, 2000); } メモ: Firefox は他のブラウザーと異なり、ページが再読み込みされた後でも要素の disabled 状態を維持します。回避するには、要素の autocomplete 属性を off に設定します。（詳しくは Firefox バグ 654072 を参照してください。）

`検証`

ボタンに対して制約検証は行われません。制約すべき値はありません。

`例`

以下の例では、要素といくらかの CSS と JavaScript を使用して作成した、とても基本的なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の 2 つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。

html 30 body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } js const canvas = document.querySelector(".myCanvas"); const width = (canvas.width = window.innerWidth); const height = (canvas.height = window.innerHeight - 85); const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); const colorPicker = document.querySelector('input[type="color"]'); const sizePicker = document.querySelector('input[type="range"]'); const output = document.querySelector(".output"); const clearBtn = document.querySelector('input[type="button"]'); // 角度をラジアンに変換する function degToRad(degrees) { return (degrees * Math.PI) / 180; } // 選択した大きさの値を反映 sizePicker.oninput = () => { output.textContent = sizePicker.value; }; // マウスポインターと、ボタンが押されているかどうかを格納 let curX; let curY; let pressed = false; // マウスポインターの座標を更新 document.onmousemove = (e) => { curX = e.pageX; curY = e.pageY; }; canvas.onmousedown = () => { pressed = true; }; canvas.onmouseup = () => { pressed = false; }; clearBtn.onclick = () => { ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); }; function draw() { if (pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); } requestAnimationFrame(draw); } draw();

`技術的概要`

値	ボタンのラベルとして使われる文字列
イベント	`click`
対応している共通属性	`type` および `value`
IDL 属性	`value`
DOM インターフェイス	`HTMLInputElement`
メソッド	なし
暗黙の ARIA ロール	`button`

`仕様書`

Specification
HTML # button-state-(type=button)

`ブラウザーの互換性`

関連情報およびそれに実装されている HTMLInputElement インターフェイス。より新しい Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 2025年4月20日 by MDN contributors. View this page on GitHub • Report a problem with this content