1. ウェブ
  2. HTML
  3. リファレンス
  4. 要素
  5. <input>
  6. <input type="button">

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTML <input type="button"> 属性値

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

<input class="styled" type="button" value="Add to favorites" />

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 20%),
    rgb(0 0 0 / 20%) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 60%),
    inset -2px -2px 3px rgb(0 0 0 / 60%);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 60%),
    inset 2px 2px 3px rgb(0 0 0 / 60%);
}

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

値

value ありのボタン

<input type="button"> 要素の value 属性には、ボタンのラベルとして使われる文字列を設定します。 value はボタンのアクセシブル説明を指定します。

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

value なしのボタン

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

html
<input type="button" />

ボタンの使用

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

基本的なボタン

基本的なボタンに click イベントハンドラーを設定し、マシンを起動させましょう（つまり、ボタンの value と続く段落の文字列コンテンツを切り替えます）。

html
<form>
  <input type="button" value="マシンを起動" />
</form>
<p>マシンが停止しています。</p>
js
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 グローバル属性を使用します。

この例では、