HTML button要素の使い方｜type=submit・disabledとform属性

この記事の要点

<button> 要素はクリック可能なボタンを生成する。type 属性で動作が決まる
type は submit（フォーム送信）/ reset（フォームリセット）/ button（汎用）の 3 種
type を省略すると submit 扱い。フォーム内でうっかり送信される事故の原因に
<input type="button"> とは別物。<button> は中に画像やアイコンを入れられる
disabled / form / formaction / formmethod 等で送信先や挙動を細かく制御可能

button 要素とは

<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 の違い

項目	<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 扱いになります。

ページ一覧

その他