HTML Living Standard/button

button 要素

<button> 要素は、クリック可能なボタンを定義するために使用されます。この要素は、テキストや画像、アイコンなどの複雑なコンテンツを含む柔軟なボタンを作成するために使用されます。

カテゴリ

• フローコンテンツ
• フレージングコンテンツ
• インタラクティブコンテンツ
• リスト化可能（<datalist> を参照）

使用される文脈

• フローコンテンツまたはフレージングコンテンツが期待される場所

コンテンツモデル

• フローコンテンツ。ただし、他のインタラクティブコンテンツ（例: 追加のフォームコントロールやリンク）を含めることはできません。

タグの省略

• 開始タグおよび終了タグは省略できません。

属性

<button> 要素には以下の属性が使用できます：

• グローバル属性
• autofocus — ページ読み込み時にこのボタンにフォーカスを設定
• disabled — ボタンを無効化
• form — このボタンが関連付けられるフォームの ID
• formaction — ボタンがクリックされたときの送信先 URL（<form> の action を上書き）
• formenctype — データ送信時のエンコーディングタイプ
  • application/x-www-form-urlencoded（デフォルト）
  • multipart/form-data
  • text/plain
• formmethod — データ送信時の HTTP メソッド（例: GET, POST）
• formnovalidate — フォーム送信時のバリデーションをスキップ
• formtarget — 送信結果を表示するターゲットブラウザコンテキスト（例: _self, _blank）
• name — フォーム送信時に送信されるキー名
• type — ボタンの種類を指定
  • submit（デフォルト）：フォーム送信ボタン
  • reset：フォームリセットボタン
  • button：スクリプトで制御するための一般的なボタン
• value — フォーム送信時に送信される値

使用例

基本的なボタン

<button>クリックしてください</button>

フォーム送信ボタン

<form action="/submit" method="post">
  <button type="submit">送信</button>
</form>

リセットボタン

<form>
  <input type="text" name="name" placeholder="名前">
  <button type="reset">リセット</button>
</form>

アイコン付きボタン

<button>
  <img src="icon.png" alt="アイコン">
  アイコン付きボタン
</button>

カスタム送信先付きのボタン

<form action="/default-submit" method="post">
  <button type="submit" formaction="/custom-submit">カスタム送信</button>
</form>

スクリプト制御ボタン

<button type="button" onclick="alert('ボタンがクリックされました')">
  アラートを表示
</button>

注意事項

• <button> 要素は柔軟なコンテンツをサポートしており、テキストや画像、アイコンなどを含めることができます。
• 属性 type="button" を明示的に指定しない場合、デフォルトで type="submit" になります。このため、フォーム内で意図せず送信が発生する可能性があります。
• スタイルのカスタマイズは CSS を使用して行います。<button> 要素はデフォルトでブラウザ固有のスタイルを持つため、必要に応じてリセットスタイルを適用してください。

関連仕様

• HTML Living Standard - button
• MDN Web Docs - button

参考情報

• <input type="button"> との違いについても検討してください。<button> 要素はコンテンツを柔軟にカスタマイズできますが、<input type="button"> はテキストラベルのみを持つシンプルなボタンです。