<button>の使い方
Web標準HTML/CSS > <button>の使い方
<button>
要素の説明
<button>は、<input type="button">と同様の機能を持つ要素です。機能は同じですが、画像などを使うこともできるので自由度がある程度高くなっています。
指定できる属性
- id
- ページ内に1つ、特別な役割を与える時に指定します。
- class
- ページ内に複数、特別な役割を与える時に指定します。
- type
- ボタンの種類を指定します。
submit:送信ボタン
reset:リセットボタン
button:汎用ボタン - name
- 部品に名前をつけます。
- disabled
- ボタンを変更も選択も不可能にします。
中に入れられる要素
<button>には、フォーム以外のブロック要素やインライン要素を入れることができます。
サンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプルページ</title> </head> <body> <div id="header"> <h1>サンプルページ</h1> <p>このページはサンプルを表しています。</p> </div> <h2>コンテンツ</h2> <form> <p>送信ボタン:<button type="submit" disabled>送信</button></p> <p>リセットボタン: <button type="reset">リセット</button></p> <p>汎用ボタン:<button type="button">ボタン</button></p> </form> </body> </html>