フォーム - 汎用ボタン
- button〔汎用ボタン〕
button
汎用ボタン
2008/3/26
構文
<button> ~ </button>
説明
button要素は、汎用ボタンを表すインライン要素です。
type属性には、"button"(通常のボタン)、"submit"(送信ボタン)、"reset"(リセットボタン)の値を指定可能です。 デフォルトは、"submit"(送信ボタン)です。
それぞれ、input要素のtype属性にbutton、submit、resetを指定した時と動作は同じですが、button要素内に画像やHTMLタグを使用できる点が異なります。 ただし、button要素内に、input要素、select要素、textarea要素、label要素、button要素、form要素、fieldset要素、iframe要素、isindex要素を含めることはできませんので注意してください。
属性
属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
---|---|---|---|---|---|
XHTML 1.0 | XHTML 1.1 | ||||
name="%CDATA" | ボタン要素の名前を指定。 | STF | S | 任意 | |
value="%CDATA" | ボタンに表示するテキストを指定。 | STF | S | 任意 | |
type="button | submit | reset" | ボタン要素のタイプを指定。通常のボタンの場合は"button"、送信ボタンの場合は"submit"(デフォルト値)、リセットボタンの場合は"reset"を指定。 | STF | S | "submit" | |
disabled="disabled" | 入力要素の無効化の有無を指定。デフォルトは有効。 | STF | S | 任意 |
サンプル
シンプルなボタン
<form action="#" onsubmit="alert('テストのため送信しません');return false;" onreset="alert('フォームをリセットします')"> <p> <input type="text" value="" /> </p> <p> <button type="button">通常のボタン</button> <button>送信ボタン</button> <button type="submit">送信ボタン</button> <button type="reset">リセットボタン</button> </p> </form>
画像を使ったボタン
<style type="text/css"> p.btn1 button { margin:0; padding:5px; } p.btn1 button img { vertical-align:middle; } p.btn2 button { margin:0; padding:0; background-color:#fff; border:0; } p.btn2 button img { vertical-align:middle; } </style> <form action="#"> <p class="btn1"> <button type="button" onclick="location.href='/content/demo/sample.zip'"><img src="/content/img/icon/color/download.gif" alt="zip" /> Download ZIP(1KB)</button> <button type="button" onclick="window.open('/?t=mail&p=mail','w');"><img src="/content/img/icon/color/letter.gif" alt="contact" /> お問合せ</button> <button type="button"><img src="/content/img/icon/color/action_delete.gif" alt="閉じる" /> 閉じる</button> </p> <p class="btn2"> <button type="button" onclick="window.open('http://phpjavascriptroom.com/','w');"><img src="/content/img/banner/banner.gif" alt="PHP & JavaScript Room" /></button> </p> </form>
関連コンテンツ
TOP / ご利用上の注意点 / リンクについて / RSS
Thanks: Material Design 420 free icons
Follow us on: Twitter, Facebook Page, Google+ Page
©2023 PHP & JavaScript Room All Rights Reserved.