<button> - ボタン

トップ > HTMLリファレンス > <button>

概要

形式
<button>~</button>
サポート
LS / H4 / e4 / Ch1 / Fx1 / Op1 / Sa1 / N6
カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
リステッド, ラベラブル, サブミッタブル, リアソシエイタブル(HTML 5.2のみ) な フォーム関連要素
パルパブルコンテンツ
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
フレージングコンテンツ (ただし、インタラクティブコンテンツ を子孫に持つことはできない)
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
popovertarget
popovertargetaction
type
value

説明

ボタンを表示します。<button>~</button> で囲まれた部分がボタン上に表示されます。ボタンに表示される部分に HTML を指定することも可能です。

type=submit を指定すると、サブミットボタンとして機能します。

フォーム関連の属性は、サブミットボタンを複数用意し、押すボタンによってフォームパラメータ(action, enctype, method, novalidate, target)を変更する際に有用です。

属性

【共通属性】
グローバル属性
詳細は グローバル属性 を参照してください。
【固有属性】
type=type
LS/H4/e4/Ch/Fx/Sa/Op/N6
ボタンの種別を指定します。
button
通常のボタン。
submit
実行ボタン(規定値)。
reset
リセットボタン。
menu
メニュー表示ボタン(HTML5.1~)
省略した場合は type="submit" とみなされますが、Internet Explorer 6 など古いブラウザでは type="button" とみなされるものもあります。
name=name
LS/H4/e4/Ch/Fx/Sa/Op/N6
名前を指定します。
value=value
LS/H4/e4/Ch/Fx/Sa/Op
ボタンに割り当てられる値を指定します。
disabled
LS/H4/e4/Ch/Fx/Sa/Op/N6
この属性を指定すると、ボタンを押した時の動作が無効になります。
autofocus
LS/H5/e/Ch/Fx/Sa/Op
ページを開いた際に、自動的にフォーカスをあてます。
popovertarget=id
LS/Ch/Ed/Sa
ポップオーバーターゲットのIDを指定します。詳細は popover を参照してください。

popovertargetaction=action
LS/Ch/Ed/Sa
ポップオーバーターゲットに対するアクションを指定します。詳細は popover を参照してください。

menu=menu
[非推奨] H5-5
メニューのIDを指定します。HTML5.1 で追加されましたが、HTML 5.2 で廃止されました。
【フォーム関連】
form=id
LS/H5/Ch/Fx/Sa/Op
関連付けたい form要素のidを指定します。
formaction=url
LS/H5/e/Ch/Fx/Sa/Op
フォーム送信先のURLを指定します。
formenctype=value
LS/H5/e/Ch/Fx/Sa/Op
フォームのエンコードタイプを指定します。
formmethod=value
LS/H5/e/Ch/Fx/Sa/Op
フォームのメソッド(GET/POST/...)を指定します。
formnovalidate
LS/H5/e/Ch/Fx/Op
input要素の required属性などの入力値のバリデーションチェックを行わないことを指定します。
formtarget=value
LS/H5/e/Ch/Fx/Sa/Op
フォーム送信結果を表示するフレーム名を指定します。
【データバインド関連】
datafld=datafld
[非推奨] e4-?
データバインド機能を用いる際の、データソースの列名を指定します。
dataformatas=format
[非推奨] e4-?
データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。
datasrc=datasrc
[非推奨] e4-?
データバインド機能を用いる際の、データソースの ID を指定します。

使用例

HTML
<button type="button" onclick="alert('OK')">OK</button>
表示

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月24日
http://www.tohoho-web.com/html/button.htm