title | slug | l10n | ||
---|---|---|---|---|
<input type="button"> |
Web/HTML/Element/input/button |
|
{{HTMLSidebar}}
{{HTMLElement("input")}} 要素の button
型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは {{domxref("Element/click_event", "click")}} イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。
{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
メモ:
<input>
要素のbutton
型は完全に妥当な HTML ですが、より新しい {{HTMLElement("button")}} 要素が、ボタンの作成にはより好まれるようになりました。 {{HTMLElement("button")}} のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。
<input type="button">
要素の value
属性には、ボタンのラベルとして使われる文字列を設定します。 value
はボタンの{{glossary("accessible description", "アクセシブル説明")}}を指定します。
<input type="button" value="クリックしてね" />
{{EmbedLiveSample("Button_with_a_value", 650, 30)}}
value
を指定しなかった場合は、無印のボタンになります。
<input type="button" />
{{EmbedLiveSample("Button_without_a_value", 650, 30)}}
<input type="button">
要素には既定の動作がありません(親戚である <input type="submit">
や <input type="reset">
は、それぞれフォームの送信とリセットに使用されます)。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。
単純なボタンに {{domxref("Element/click_event", "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>
を表す {{domxref("HTMLInputElement")}} オブジェクトの参照を受け取り、この参照を変数 button
に保存します。{{domxref("EventTarget.addEventListener", "addEventListener()")}} は、ボタンに {{domxref("Element/click_event", "click")}} イベントが発生したときに実行される関数を設定します。
{{EmbedLiveSample("A_simple_button", 650, 100)}}
ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの {{HTMLElement("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 = "マシンが停止しています。";
}
}
{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}
Note
上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。
ボタンを無効にするには、次のように disabled
グローバル属性を指定するだけです。
<input type="button" value="Disable me" disabled />
実行時に disabled
に true
または false
を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと button.disabled = true
を使用して無効化されます。それから {{domxref("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);
}
{{EmbedLiveSample("Setting_the_disabled_attribute", 650, 60)}}
disabled
属性が指定されなかった場合、ボタンは disabled
の状態を親要素から継承します。これによって、複数の要素を {{HTMLElement("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);
}
{{EmbedLiveSample("Inheriting_the_disabled_state", 650, 100)}}
Note
Firefox は他のブラウザーと異なり、ページが再読み込みされた後でも <input>
要素の disabled
状態を維持します。回避するには、 <input>
要素の autocomplete
属性を off
に設定します。(詳しくは Firefox バグ 654072 を参照してください。)
ボタンに対して制約検証は行われません。制約すべき値はありません。
以下の例では、 {{htmlelement("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>
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();
{{EmbedLiveSample("Examples", '100%', 600)}}
値 | ボタンのラベルとして使われる文字列 |
イベント | {{domxref("Element/click_event", "click")}} |
対応している共通属性 |
type および
value
|
IDL 属性 | value |
DOM インターフェイス | {{domxref("HTMLInputElement")}} |
メソッド | なし |
暗黙の ARIA ロール | button |
{{Specifications}}
{{Compat}}
- {{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。
- より新しい {{HTMLElement("button")}} 要素。
- CSS プロパティの互換性