WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <button>「ボタン」

<button> 「ボタン」[読み方:ボタン]

<button>タグは、ボタンを表示するために利用します。
<input type="button">とは異なり、<button>には内容を持たせることが出来ます。
このため、ボタンの文字色を変えたり、画像のボタンを作成することが出来ます。

HTML規格HTML4.01HTML5
使用可否
広告

<button> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リストされた要素、ラベル付け可能な要素、送信可能な要素、自動大文字継承要素、フォーム関連要素
パブバブルコンテンツ
フレージングコンテンツを子要素にもてる場所フレージングコンテンツ
但し、インタラクティブコンテンツとtabindex属性を指定したタグは不可
不可

<button> の属性

【構文】
<button type="ボタン種類" ・・・>~内容~</button>
属性意味値のサンプルなど
type="ボタン種類"ボタンの種類
意味
submit送信ボタン(初期値)
resetリセットボタン
button一般ボタン
name="名前"ボタンに付ける名前(from内)「btn01」など
value="値"送信データの値「1」など
disabled (値なし)ボタンの無効化「disabled」
autofocus (値なし)自動でフォーカスを設定
※HTML5以降にグローバル属性に変更
「autofocus」
form="id"ボタンを関連付ける<form>のid
※HTML5で追加
「form01」など
formaction="URI"ボタン押下時に実行するURI
※HTML5で追加
「http://www.example.jp/login.cgi」など
formenctype="タイプ"送信するエンコードタイプ
※HTML5で追加
application/x-www-form-urlencoded
(初期値)
multipart/form-data
text/plain
formmethod="メソッド"実行するメソッド
※HTML5で追加
get(初期値)
post
formnovalidate (値なし)入力値の妥当性を検証しない
※HTML5で追加
「formnovalidate」
formtarget="ターゲット"実行先の表示方法
※HTML5で追加
意味
_blank新規のウィンドウに表示
_self現在のウィンドウに表示
_parent親ウィンドウに表示
_top現在のウインドウに表示
(フレームは解除される)
任意ウインドウ名任意のウィンドウに表示
popovertarget="id"Popover属性を持つタグのID
※HTML5以降に追加
「foo01」など
popovertargetaction="切り替え方法"ポップオーバーの表示・非表示切り替え
※HTML5以降に追加
意味
toggle
(初期値)
ポップオーバー要素を表示または非表示
showポップオーバー要素を表示
hideポップオーバー要素を非表示
廃止された属性
  • datasrc
  • datafld
  • dataformatas
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<button>タグのサンプル

1.ボタンの文字を変更する場合
<button>
このボタンは<big><b><font color="red">サンプル</font></b></big>のため動作しません
</button>
2.submit実行する場合
<form method="post" action="test.cgi">
<p>下のボタンで「test.cgi」が実行され、送信データを確認できます</p>
<button value="btn1">送信内容確認</button>
</form>

下のボタンで「test.cgi」が実行され、送信データを確認できます

ページTOP

留意事項

  • <button>タグの代わりに<input type="submit">や<input type="button">が多く利用されています。また、<a>を利用することも多くあります。
  • type="submit"またはtypeを指定しない場合、<button>が所属する<form>が実行されます。ただし、form属性が指定された場合、form属性で指定された<form>が実行されます。
  • type="button"を指定した場合、<button>では何の動作も行われません。JavaScriptなどで、ボタン押下時の動作を指定する必要があります。
  • type="reset"を指定した場合、<button>が所属する<form>の入力内容がクリアされます。
  • type="submit"以外の場合、formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性は、指定出来ません。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン