buttonの使い方についてまとめ

buttonの概要

button要素は、クリックできるボタンを表示させる要素です。フォームに限らず、文書内のあらゆる場所で使用できます。ボタンの見た目はCSSで変更可能です。

buttonのカテゴリー

コンテンツカテゴリー

buttonに入れられるタグ一覧

タグ早見表

フレージングコンテンツ、ただしインタラクティブコンテンツがあってはならない。（abbr area audio b bdo br canvas cite code data datalist del dfn em i img input ins kbd link map mark math meta meter noscript object output progress q ruby samp script small span strong sub sup svg time var video wbr テキスト

入れられるタグのカテゴリー・モデル

この記事の目次

buttonに使える属性

属性とは<button>タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

buttonに使える属性

autofocus 概要 ページが読み込まれた際に、自動的にフォーカスを合わせます。ページ内で1つだけ指定可能です。自動的にフォーカスを合わせるため、音声読み上げ機能を利用しているユーザーを混乱させる可能性もあります。
属性の値 論理属性（属性名だけで指定可能）
disabled 概要 フォームの部品を無効化します。
属性の値 論理属性（属性名だけで指定可能）
form 概要 関連付けたいform要素のid属性を指定します。これを指定することで、button要素は、form要素の中になくても、その一部とすることができます。
属性の値 id属性の値
formaction 概要 フォーム送信先のURLを指定します。指定した場合は、そのボタンの属するaction属性よりも優先されます。
属性の値 送信先のURL
formenctype 概要 フォームのエンコードタイプを指定します。指定した場合は、そのボタンの属するenctype属性より優先されます。
属性の値
  • application/x-www-form-urlencoded: 初期値です。
  • multipart/form-data: input要素のtype属性にfileを指定する場合に使用します。
  • text/plain: テキストとしてデータを送信する場合に使用します。
formmethod 概要 フォームを送信する際のHTTPメソッドを指定します。指定した場合は、そのボタンの属するmethod属性より優先されます。
属性の値
  • _self: 現在のウィンドウ、現在のフレームに開く。属性が指定されていない場合の既定値です。
  • _blank: 新規ウィンドウで開く
  • _parent: 親ウィンドウ、親フレームに開く。
  • _top：ウィンドウ全体に開く。フレームは解除する。親要素がない場合、_selfと同じ振る舞いをします。
formnovalidate 概要 入力値のバリデートをしないように指定します。指定した場合は、そのボタンの属するnovalidate属性より優先されます。
属性の値 論理属性（属性名だけで指定可能）
formtarget 概要 入力値のバリデートをしないように指定します。指定した場合は、そのボタンの属するnovalidate属性より優先されます。
属性の値 論理属性（属性名だけで指定可能）
name 概要 部品に名前をつけます。フォームのデータを送信後に入力欄を特定するのに利用します。
属性の値 テキスト
type 概要 ボタンの種別を指定します。
属性の値
  • submit: 属するフォームのデータをサーバーに送信するボタンとなります。type属性が指定されていない場合もこの機能となります。
  • reset: ボタンに紐づけられたフォームの値を初期値に戻すリセットボタンとなります。
  • button: そのままでは何も動作のないボタンとなります。スクリプト要素等でイベントを追加することで機能を付加できます。
value 概要 ボタンの初期値を指定します。フォームを送信する際に引数としてサーバーに渡されます。
属性の値 テキスト

スポンサードサーチ

<button>の使い方

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり