button要素
button要素はボタンをマークアップするための要素です。
type属性で「submit」、「button」、「rest」のinput要素と同等の機能を有しますが、フレージング・コンテンツを内部にマークアップすることが可能なため幅広い用途で利用が可能です。
<button>送信</button><button><strong>送信</strong></button>button要素は以下の属性を取ることができます。
autofocus属性
autofocus属性を指定することでページロード時に自動でフォーカスが当たるようになりユーザーが手動でフォーカスを当てる必要がなくなります。
<button autofocus>送信</button>disabled属性
disabled属性が指定されたbutton要素は非活性になり操作が不可能になります。
<button disabled>送信</button>form属性
form属性でform要素と関連付けを行うことができます。次のようにform要素のid属性をform属性に指定することでbutton要素とform要素は関連付けられ、button要素を押下時に関連付けたform要素のデータが送信されます。
<form id="form01" action="target.php">
<input type="text" value="データ">
</form>
<button form="form01">送信</button>formaction属性
formaction属性でform要素の送信先を指定できます。formaction属性で指定した送信先はform要素のaction属性で指定した送信先より優先して採用されます。
<button formaction="target.php">送信</button>formenctype属性
formenctype属性はform要素の送信時のデータ形式を指定できます。formenctype属性で指定した送信先はform要素のenctype属性で指定したデータ形式より優先して採用されます。
<button formenctype="multipart/form-data">送信</button>formmethod属性
formmethod属性はform要素のフォーム送信する際のHTTPメソッドを指定できます。formmethod属性で指定した送信先はform要素のmethod属性で指定したHTTPメソッドより優先して採用されます。
<button formmethod="post">送信</button>formnovalidate属性
formnovalidate属性はform要素のバリデーションを無効化できます。formnovalidate属性で設定はform要素のnovalidate属性で指定した設定より優先して採用されます。
<button formnovalidate>送信</button>formtarget属性
formtarget属性はform要素の送信時のターゲットを指定できます。formtarget属性はform要素のtarget属性で指定した設定より優先して採用されます。
<button formtarget="_blank">送信</button>menu属性
type属性の値が「menu」の場合、menu属性でmenu要素のid属性と関連付けを行うことができます。
<button type="menu" menu="popup">開く</button>
<menu id="popup">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
</menu>name属性
name属性でボタンの名前をつけることができ、指定した名前はデータ送信時のキーとして利用されます。
<button name="submit">送信</button>type属性
type属性でボタンのデータ・タイプを以下の値で指定できます。
| 値 | データ・タイプ |
|---|---|
| submit | 列挙された値、フォーム送信の機能もある(デフォルト) |
| reset | フォームのリセット機能 |
| button | 特定の機能を持たないボタン |
| menu | メニューを表示 |
value属性
value属性でフォームパーツの値を指定することができます。
<button value="○○○">送信</button>参考URL
4.10.6 The button element - HTML5.1 - W3C
4.10.6 The button element - HTML5 - W3C
登録日 : 2015年01月04日 最終更新日 : 2015年1月12日