We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

"button" 型の <input> 要素は、単純なプッシュボタンとして描画され、イベントハンドラー関数(ふつうは click イベント)を割り当てることで、ウェブページのあらゆる所でカスタム機能を制御するようにプログラムすることができます。

<input type="button" value="クリックしてね">

メモ: "button" 型の <input> 要素は完全に有効な HTML ですが、より新しい <button> 要素が、ボタンの作成にはより好まれるようになりました。 <button> のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。

ボタンのラベルとして使われる DOMString
イベント click
対応する共通の属性 type, value
IDL 属性 value
メソッド なし

<input type="button"> 要素の value 属性にはボタンのラベルとして使われる DOMString を設定します。

<input type="button" 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>
var btn = document.querySelector('input');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === 'マシンを起動') {
    btn.value = 'マシンを停止';
    txt.textContent = 'マシンが起動しています!';
  } else {
    btn.value = 'マシンを起動';
    txt.textContent = 'マシンが停止しています。';
  }
}

このスクリプトは DOM で <input> を表す HTMLInputElement オブジェクトの参照を受け取り、この参照を変数 btn に保存します。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>

実行時に disabledtrue または false を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと btn.disabled = true を使用して無効化されます。それから setTimeout() 関数を使用して、2秒後にボタンの状態を有効の状態の戻しています。

disabled 属性が指定されなかった場合、ボタンは disabled の状態を親要素から継承します。これによって、複数の要素を <fieldset> 要素のようなコンテナーの中に入れ、コンテナーに disabled を設定することで、一括で有効化したり無効化したりすることができます。

以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときに disabled 属性が <fieldset> に設定され、2秒経過するまで3つのボタンがすべて無効になります。

メモ: Firefox は他のブラウザーとは異なり、ページのロード中は既定で <button>動的な無効状態を維持します。この機能を制御するには autocomplete 属性を使用してください。

検証

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

以下の例では、 <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>
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');

// 角度をラジアンに変換する
function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

// 選択した大きさの値を反映

sizePicker.oninput = function() {
  output.textContent = sizePicker.value;
}

// マウスポインターと、ボタンが押されているかどうかを格納
var curX;
var curY;
var pressed = false;

// マウスポインターの座標を更新
document.onmousemove = function(e) {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

canvas.onmousedown = function() {
  pressed = true;
};

canvas.onmouseup = function() {
  pressed = false;
}

clearBtn.onclick = function() {
  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();

仕様書

仕様書 状態
HTML Living Standard
<input type="button"> の定義
現行の標準
HTML5
<input type="button"> の定義
勧告

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本対応 1.0 1.0 (1.7 or earlier) (有) (有) 1.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 (有) 4.0 (4.0) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, 0918nobita
最終更新者: mfuji09,