cman.jpWEBページ作成
広告
<button> 「ボタン」[読み方：ボタン]
広告
<button> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ リストされた要素、ラベル付け可能な要素、送信可能な要素、自動大文字継承要素、フォーム関連要素 パブバブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ 但し、インタラクティブコンテンツとtabindex属性を指定したタグは不可 | 不可 |
<button> の属性
【構文】
<button type="ボタン種類" ・・・>～内容～</button>
| 属性 | 意味 | 値のサンプルなど | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type="ボタン種類" | ボタンの種類 |
| ||||||||||||
| 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で追加 |
| ||||||||||||
| formmethod="メソッド" | 実行するメソッド ※HTML5で追加 |
| ||||||||||||
| formnovalidate （値なし） | 入力値の妥当性を検証しない ※HTML5で追加 | 「formnovalidate」 | ||||||||||||
| formtarget="ターゲット" | 実行先の表示方法 ※HTML5で追加 |
| ||||||||||||
| popovertarget="id" | Popover属性を持つタグのID ※HTML5以降に追加 | 「foo01」など | ||||||||||||
| popovertargetaction="切り替え方法" | ポップオーバーの表示・非表示切り替え ※HTML5以降に追加 |
| ||||||||||||
| 廃止された属性 |
|
|||||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<button>タグのサンプル
1.ボタンの文字を変更する場合
<button>
このボタンは<big><b><font color="red">サンプル</font></b></big>のため動作しません
</button>
このボタンは<big><b><font color="red">サンプル</font></b></big>のため動作しません
</button>
2.submit実行する場合
ページTOP
<form method="post" action="test.cgi">
<p>下のボタンで「test.cgi」が実行され、送信データを確認できます</p>
<button value="btn1">送信内容確認</button>
</form>
<p>下のボタンで「test.cgi」が実行され、送信データを確認できます</p>
<button value="btn1">送信内容確認</button>
</form>
留意事項
- <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属性は、指定出来ません。
| 関連するHTMLタグ | |
|---|---|
| form | 入力フォーム |
| input_submit | formデータの送信ボタン |
| input_button | 一般ボタン |
| input_reset | from内の入力内容リセット |
広告