<input type="button">
<input>
要素の button
型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは click
イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。
試してみましょう
値
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>
メモ: 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。
ボタンの無効化と有効化
ボタンを無効にするには、次のように 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 class="toolbar">
<input type="color" aria-label="select pen color" />
<input
type="range"
min="2"
max="50"
value="30"
aria-label="select pen size" /><span class="output">30</span>
<input type="button" value="Clear canvas" />
</div>
<canvas class="myCanvas">
<p>Add suitable fallback here.</p>
</canvas>
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 Standard # button-state-(type=button) |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<input>
およびそれに実装されているHTMLInputElement
インターフェイス。- より新しい
<button>
要素。 - CSS プロパティの互換性