過去バージョン

button 要素とは

要素はクリック可能なボタンを生成する HTML 要素です。type 属性で動作が決まり、フォーム送信ボタン・フォームリセットボタン・JavaScript で動かす汎用ボタンの 3 用途に分かれます。

基本構文

<!-- 送信ボタン -->
<form action="/login" method="post">
  <input type="text" name="user">
  <input type="password" name="pw">
  <button type="submit">ログイン</button>
</form>

<!-- 汎用ボタン（JS で処理） -->
<button type="button" onclick="alert('Hi')">押して</button>

<!-- リセットボタン -->
<button type="reset">入力をクリア</button>

type 属性の値

type の値	動作	用途
submit（既定）	所属する <form> を送信する	ログイン / 登録ボタン
reset	所属する <form> の入力値を初期化	入力クリア
button	何もしない。JS から onclick 等で動かす	モーダルを開く / 計算を実行 等

type を省略すると submit になります。フォーム内に「ただのボタン」を置きたいときに type="button" を書き忘れると、エンターキーや誤クリックで意図せずフォームが送信されるバグを生みます。

主な属性一覧

属性	意味
type	submit / reset / button
name	送信時のパラメータ名。同じフォームに複数の送信ボタンを置く場合の判定にも
value	送信時のパラメータ値
disabled	ボタンを無効化（クリック不可・送信されない）
autofocus	ページ読み込み時に自動でフォーカス
form	所属する <form> の id を指定。フォーム外のボタンを紐付けできる
formaction	<form action> を上書きする送信先
formmethod	<form method> を上書き（get / post）
formnovalidate	このボタンで送信するときは HTML5 バリデーションをスキップ
formtarget	送信結果の表示先（_blank 等）

button と input type=button の違い

項目
中身に HTML を入れられるか	○（画像・アイコン・改行も可）	×（value 属性のテキストのみ）
閉じタグ	必要	不要（空要素）
送信時の値	value 属性で指定	value 属性で指定
推奨度	現代では基本こちら	古典的な書き方

同一フォームで複数の送信ボタンを使い分ける

同じフォームで「保存」「下書き保存」「削除」を 1 つのフォームに置きたい場合、name と value、または formaction で振り分けます。

<form action="/posts" method="post">
  <textarea name="body"></textarea>

  <!-- どのボタンが押されたかで分岐 -->
  <button type="submit" name="action" value="publish">公開</button>
  <button type="submit" name="action" value="draft">下書き保存</button>

  <!-- 送信先自体を変える -->
  <button type="submit" formaction="/posts/delete">削除</button>
</form>

disabled の使いどころ

<button type="submit" id="send" disabled>送信中...</button>

<script>
document.querySelector('form').addEventListener('submit', () => {
  document.getElementById('send').disabled = true;  // 二重送信防止
});
</script>

二重送信防止のため、送信ボタンをサブミット直後に disabled にするのは定番のテクニックです。

アクセシビリティ

• 視覚的にボタンに見えるなら <button> を使う — <div onclick> はキーボード操作・スクリーンリーダー対応が手間
• aria-label — アイコンだけのボタンには必ず付ける（例: <button aria-label="閉じる">×</button>）
• フォーカスリングを CSS で消す場合は代替のフォーカス表示を必ず用意する

よくあるハマりどころ

• type 未指定で submit になる — フォーム内の「ただのボタン」には必ず type="button" を付ける
• フォーム外のボタンが効かない — form="myForm" 属性で紐付けると、レイアウト上フォームの外でも送信できる
• onClick で e.preventDefault() し忘れ — submit ボタンでページ遷移してしまう
• type=button で submit を想定したコード — 逆のパターン。送信したいのに何も起きない
• 同じフォームに同名の type=submit が複数 — どれが押されたかを name + value で判定する

スタイリングのコツ

ブラウザ既定の <button> スタイルは OS ごとに大きく異なります。ボタンの見た目を統一するには次のリセットが有効です。

button {
  appearance: none;       /* OS のネイティブ装飾を解除 */
  border: 0;
  background: #3b82f6;
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;          /* 親のフォントを継承（既定はゴシック固定） */
}
button:hover { background: #2563eb; }
button:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}
button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

FAQ

Q: 画像をボタンにできる？
A: <button><img src="..." alt="送信"></button> のように要素内に画像を入れられます。<input type="image"> でも実現できますが、<button> のほうが装飾の自由度が高くなります。

Q: Enter キーで送信されるのを止めたい
A: <button type="submit"> が無い、もしくは無効ならテキスト入力での Enter 送信は止まります。明示的に止めるなら keydown イベントで event.preventDefault() します。

Q: フォームの中に普通の押下ボタンを置きたい
A: 必ず type="button" を明示してください。指定しないと submit 扱いになります。

関連

• type属性 — type の概念
• input要素 — テキスト・チェックボックス等の入力部品
• formのsubmit前にjavascriptを呼び出す方法
• buttonでformをsubmitさせない方法
• Javascript のみで form を post で submit する方法
• HTML — カテゴリトップ