--- title: slug: Web/HTML/Element/input/button tags: - Element - Forms - HTML - HTML forms - Input - Input Element - Input Type - Reference - button translation_of: Web/HTML/Element/input/button ---
{{HTMLRef("Input_types")}}

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

{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}

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

{{anch("Value", "値")}} ボタンのラベルとして使われる {{domxref("DOMString")}}
イベント {{domxref("Element/click_event", "click")}}
対応している共通属性 {{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}
IDL 属性 value
メソッド なし

値

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

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

{{EmbedLiveSample("summary-example3", 650, 30)}}

value を指定しなかった場合は、無印のボタンになります。

<input type="button">

{{EmbedLiveSample("summary-example1", 650, 30)}}

ボタンの使用

<input type="button"> 要素には既定の動作がありません (親戚である <input type="submit"> や <input type="reset"> は、それぞれフォームの送信とリセットに使用されます)。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。

単純なボタン

単純なボタンに {{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()")}} は、ボタンに {{event("click")}} イベントが発生したときに実行される関数を設定します。

{{EmbedLiveSample("A_simple_button", 650, 100)}}

ボタンへのショートカットキーの追加

ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの {{HTMLElement("input")}} でも同じですが、 {{htmlattrxref("accesskey")}} グローバル属性を使用します。

この例では、 s がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、 s と特定の修飾キーの組み合わせが必要です。その一覧については accesskey を参照してください)。

<form>
  <input type="button" value="マシンを起動" accesskey="s">
</form>
<p>マシンが停止しています。</p>

{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}

注: 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。

ボタンの無効化と有効化

ボタンを無効にするには、次のように {{htmlattrxref("disabled")}} グローバル属性を指定するだけです。

<input type="button" value="Disable me" disabled>

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

{{EmbedLiveSample("Hidden_code_1", 650, 60)}}

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

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

{{EmbedLiveSample("Hidden_code_2", 650, 60)}}

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

検証

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

例

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

{{EmbedLiveSample("Examples", '100%', 600)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("html.elements.input.input-button")}}

関連情報