<input type="button">

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

値

<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>

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 に 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';
  window.setTimeout(function() {
    button.disabled = false;
    button.value = 'Enabled';
  }, 2000);
}

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;
  window.setTimeout(function() {
    fieldset.disabled = false;
  }, 2000);
}

検証

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

例

以下の例では、 <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;
}

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();

仕様書

ブラウザーの互換性

関連情報

• <input> およびそれに実装されている HTMLInputElement インターフェイス。
• より新しい <button> 要素。
• CSS プロパティの互換性