このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<input type="button">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<input> 要素のbutton 型は、プッシュボタンとして描画され、イベントハンドラー関数 (ふつうはclick イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。
試してみましょう
<input type="button" value="Add to favorites" />.styled { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(220 0 0 / 100%); background-image: linear-gradient( to top left, rgb(0 0 0 / 20%), rgb(0 0 0 / 20%) 30%, rgb(0 0 0 / 0%) ); box-shadow: inset 2px 2px 3px rgb(255 255 255 / 60%), inset -2px -2px 3px rgb(0 0 0 / 60%);}.styled:hover { background-color: rgb(255 0 0 / 100%);}.styled:active { box-shadow: inset -2px -2px 3px rgb(255 255 255 / 60%), inset 2px 2px 3px rgb(0 0 0 / 60%);}値
value ありのボタン
<input type="button"> 要素のvalue 属性には、ボタンのラベルとして使われる文字列を設定します。value はボタンのアクセシブル説明を指定します。
<input type="button" value="クリックしてね" />value なしのボタン
value を指定しなかった場合は、無印のボタンになります。
<input type="button" />ボタンの使用
<input type="button"> 要素には既定の動作がありません（親戚である<input type="submit"> や<input type="reset"> は、それぞれフォームの送信とリセットに使用されます）。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。
基本的なボタン
基本的なボタンにclick イベントハンドラーを設定し、マシンを起動させましょう（つまり、ボタンのvalue と続く段落の文字列コンテンツを切り替えます）。
<form> <input type="button" value="マシンを起動" /></form><p>マシンが停止しています。</p>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 で<input> を表すHTMLInputElement オブジェクトの参照を受け取り、この参照を変数button に保存します。addEventListener() は、ボタンにclick イベントが発生したときに実行される関数を設定します。
ボタンへのショートカットキーの追加
ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの<input> でも同じですが、accesskey グローバル属性を使用します。
この例では、s がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、s と特定の修飾キーの組み合わせが必要です。その一覧についてはaccesskey を参照してください)。
<form> <input type="button" value="マシンを起動" accesskey="s" /></form><p>マシンが停止しています。</p>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 グローバル属性を指定するだけです。
<input type="button" value="Disable me" disabled />disabled 属性の設定
実行時にdisabled にtrue またはfalse を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すとbutton.disabled = true を使用して無効化されます。それからsetTimeout() 関数を使用して、2 秒後にボタンの状態を有効の状態にリセットしています。
<input type="button" value="Enabled" />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 の状態を親要素から継承します。これによって、複数の要素を<fieldset> 要素のようなコンテナーの中に入れ、コンテナーにdisabled を設定することで、一括で有効化したり無効化したりすることができます。
以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときにdisabled 属性が<fieldset> に設定され、2 秒経過するまで 3 つのボタンがすべて無効になります。
<fieldset> <legend>Button group</legend> <input type="button" value="Button 1" /> <input type="button" value="Button 2" /> <input type="button" value="Button 3" /></fieldset>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 は他のブラウザーと異なり、ページが再読み込みされた後でも<input> 要素のdisabled 状態を維持します。回避するには、<input> 要素のautocomplete 属性をoff に設定します。（詳しくはFirefox バグ 654072 を参照してください。）
検証
ボタンに対して制約検証は行われません。制約すべき値はありません。
例
以下の例では、<canvas> 要素といくらかの CSS と JavaScript を使用して作成した、とても基本的なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の 2 つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。
<div> <input type="color" aria-label="select pen color" /> <input type="range" min="2" max="50" value="30" aria-label="select pen size" /><span>30</span> <input type="button" value="Clear canvas" /></div><canvas> <p>Add suitable fallback here.</p></canvas>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;}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();技術的概要
仕様書
| Specification |
|---|
| HTML # button-state-(type=button) |
ブラウザーの互換性
関連情報
<input>およびそれに実装されているHTMLInputElementインターフェイス。- より新しい
<button>要素。