タイトル: button要素
SEOタイトル: HTML button要素 完全ガイド（type=submit / reset / button / form 属性 / disabled / アクセシビリティ）
| この記事の要点 |
|
button 要素とは
要素はクリック可能なボタンを生成する HTML 要素です。type 属性で動作が決まり、フォーム送信ボタン・フォームリセットボタン・JavaScript で動かす汎用ボタンの 3 用途に分かれます。
基本構文
type 属性の値
| type の値 | 動作 | 用途 |
|---|---|---|
submit（既定） | 所属する | ログイン / 登録ボタン |
reset | 所属する | 入力クリア |
button | 何もしない。JS から onclick 等で動かす | モーダルを開く / 計算を実行 等 |
type を省略すると submit になります。フォーム内に「ただのボタン」を置きたいときに type="button" を書き忘れると、エンターキーや誤クリックで意図せずフォームが送信されるバグを生みます。
主な属性一覧
| 属性 | 意味 |
|---|---|
type | submit / reset / button |
name | 送信時のパラメータ名。同じフォームに複数の送信ボタンを置く場合の判定にも |
value | 送信時のパラメータ値 |
disabled | ボタンを無効化（クリック不可・送信されない） |
autofocus | ページ読み込み時に自動でフォーカス |
form | 所属する |
formaction | |
formmethod | get / post） |
formnovalidate | このボタンで送信するときは HTML5 バリデーションをスキップ |
formtarget | 送信結果の表示先（_blank 等） |
button と input type=button の違い
| 項目 | ||
|---|---|---|
| 中身に HTML を入れられるか | ○（画像・アイコン・改行も可） | ×（value 属性のテキストのみ） |
| 閉じタグ | 必要 | 不要（空要素） |
| 送信時の値 | value 属性で指定 | value 属性で指定 |
| 推奨度 | 現代では基本こちら | 古典的な書き方 |
同一フォームで複数の送信ボタンを使い分ける
同じフォームで「保存」「下書き保存」「削除」を 1 つのフォームに置きたい場合、name と value、または formaction で振り分けます。
disabled の使いどころ
二重送信防止のため、送信ボタンをサブミット直後に disabled にするのは定番のテクニックです。
アクセシビリティ
- 視覚的にボタンに見えるなら
を使う —はキーボード操作・スクリーンリーダー対応が手間aria-label— アイコンだけのボタンには必ず付ける（例:）- フォーカスリングを CSS で消す場合は代替のフォーカス表示を必ず用意する
よくあるハマりどころ
- type 未指定で submit になる — フォーム内の「ただのボタン」には必ず
type="button"を付ける - フォーム外のボタンが効かない —
form="myForm"属性で紐付けると、レイアウト上フォームの外でも送信できる - onClick で
e.preventDefault()し忘れ — submit ボタンでページ遷移してしまう - type=button で submit を想定したコード — 逆のパターン。送信したいのに何も起きない
- 同じフォームに同名の type=submit が複数 — どれが押されたかを
name+valueで判定する
スタイリングのコツ
ブラウザ既定の
スタイルは 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:のように要素内に画像を入れられます。でも実現できますが、のほうが装飾の自由度が高くなります。Q: Enter キーで送信されるのを止めたい
A:が無い、もしくは無効ならテキスト入力での Enter 送信は止まります。明示的に止めるならkeydownイベントでevent.preventDefault()します。Q: フォームの中に普通の押下ボタンを置きたい
A: 必ずtype="button"を明示してください。指定しないと submit 扱いになります。関連
- type属性 — type の概念
- input要素 — テキスト・チェックボックス等の入力部品
- formのsubmit前にjavascriptを呼び出す方法
- buttonでformをsubmitさせない方法
- Javascript のみで form を post で submit する方法
- HTML — カテゴリトップ