<button>~</button>
button（ボタン）要素はボタンを表します。button要素でマークアップすることで、内包するテキストや画像などをボタンとして使用できます。
| button要素 | 説明 |
|---|---|
| カテゴリー | ・インタラクティブコンテンツ ・サブミット可能なフォーム関連要素 ・パルパブルコンテンツ ・フォーム関連要素 ・フレージングコンテンツ ・フローコンテンツ ・ラベル付け可能な要素 ・リスト可能なフォーム関連要素 ・自動大文字化継承フォーム関連要素 |
| コンテンツモデル | フレージングコンテンツ ＊ただし、インタラクティブ・コンテンツを子孫要素に持つことはできない（ button 要素を入れ子にしたり、a 要素を子孫にすることはできない）。 |
| 使用できる場所 | フレージングコンテンツが期待される場所 |
button要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| disabled | 論理属性 | disabled 属性はフォームの入力コントロールやコマンドなどを無効にする。 button要素を無効にする。 |
| form | form要素にid属性値を指定 | form 要素に付与した id属性値を指定することで、そのフォームと、form属性をもつ入力コントロールなどを関連付けることができる。 |
| formaction | URL フォームデータ送信先URLを指定する | formaction属性を指定することで、この入力コントロールが関連づけられている form要素の action属性値を、この値で上書きすることができる。 要素が送信ボタン（ type="submit" または type="image"）の場合のみ指定することが可能。 |
| formenctype | エンコード <button type=”submit” formenctype=”application/x-www-form-urlencoded”>送信</button> <button formenctype=”application/x-www-form-urlencoded”>送信</button> | formenctype属性を指定することで、この入力コントロールが関連づけられている form要素の enctype属性値をこの値で上書きすることができる。 要素が送信ボタン（ type="submit" または type="image"）の場合のみ指定することが可能。 |
| formmethod | HTTPメソッド ・get URLの後にデータを付け加えて送信。 URL?nameA=valueA&nameB=valueB&nameC=valueC ・post URLの後にデータを付け加えないで、ボディ部に格納して送信。 | formmethod属性を指定することで、この入力コントロールが関連づけられている form要素の method属性値をこの値で上書きすることができる。 |
| formnovalidate | 論理属性 | フォームの入力内容の検証を無効にする。 要素が送信ボタン（type=”submit” または type=”image”）の場合のみ指定することが可能。 |
| formtarget | _blank 新規ウィンドウに開く。 _self 現在のウィンドウ、現在のフレームに開く。 _parent 親ウィンドウ、親フレームに開く。 _top ウィンドウ全体に開く。フレームは解除する。 ウィンドウ名 指定したウィンドウ名のウィンドウに開く。 フレーム名 指定したフレーム名のフレームに開く。 | 新規ウィンドウに開く <button type=”submit” formtarget=”_blank”>送信</button> <button formtarget=”_blank”>送信</button> |
| name | <button name=”名前”>ボタン名</button> | button要素の名前を指定する。 <button type=”submit” name=”sampleName” value=”値”>送信</button> <button name=”sampleName” value=”値”>送信</button> value属性と共に使い、ボタンに送信データを指定することもできる。 複数のボタンに同じ名前を指定することもできる。 |
| popovertarget | menuなど | popovertarget属性は、そのボタンがトグル、表示、または非表示のターゲットとするポップオーバー要素を指定する。 |
| popovertargetaction | hide 表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしない。 show 非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしない。 toggle 既定値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとする。 | popovertargetaction属性は、操作対象とするポップオーバー要素がトグルされるか、表示されるか、非表示にされるか、といったボタンの役割を示す。 |
| type | submit 送信ボタン。 初期設定値。type属性を指定しない場合は、送信ボタンとなる。 reset リセットボタン。 リセットボタンとは、送信フォームの入力欄をリセットするボタンのことで、初期設定値が空の入力欄は空に戻し、初期設定値がある入力欄は初期設定値に戻す。 button 汎用ボタン。 汎用ボタンは、JavaScriptなどの処理を呼び出すときなどに使う。 | ボタンのタイプを指定する。 a要素などにおけるtype属性 a、area、link要素における type属性 はリンク先の MIMEタイプを指定する。 |
| value | <button value=”値”>ボタン名</button> | button要素の値を指定する。 <button type=”submit” name=”sampleName” value=”値”>送信</button> <button name=”sampleName” value=”値”>送信</button> |
disabled属性
使用例
<form action="sample-button.php" method="post" target="_blank">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName">
</label>
</p>
<p>
無効ボタン：
<button disabled>type属性なし</button>
<button type="submit" disabled>送信ボタン</button>
<button type="reset" disabled>リセットボタン</button>
<button type="button" disabled>汎用ボタン</button>
</p>
<p>
有効ボタン：
<button>type属性なし</button>
<button type="submit">送信ボタン</button>
<button type="reset">リセットボタン</button>
<button type="button">汎用ボタン</button>
</p>
</form>表示
formenctype属性
使用例
<form action="sample-button.php" method="post" target="_blank">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName">
</label>
</p>
<p>
<button formenctype="application/x-www-form-urlencoded">type属性なし</button>
<button type="submit" formenctype="application/x-www-form-urlencoded">送信ボタン</button>
<button type="reset">リセットボタン</button>
<button type="button">汎用ボタン</button>
</p>
</form>表示
formmethod属性
使用例
<form action="sample-button.php" method="get" target="_blank">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName">
</label>
</p>
<p>
<button formmethod="post">type属性なし</button>
<button type="submit" formmethod="post">送信ボタン</button>
<button type="reset">リセットボタン</button>
<button type="button">汎用ボタン</button>
</p>
</form>表示
formnovalidate属性
使用例
<form action="sample-button.php" method="post" target="_blank">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName" required>
</label>
</p>
<p>
formnovalidate属性あり：
<button type="submit" formnovalidate>送信</button>
</p>
<p>
formnovalidate属性なし：
<button type="submit">送信</button>
</p>
</form>表示
formtarget属性
使用例
<form action="sample-button.php" method="post" target="_self">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName">
</label>
</p>
<p>
<button formtarget="_blank">type属性なし</button>
<button type="submit" formtarget="_blank">送信ボタン</button>
<button type="reset">リセットボタン</button>
<button type="button">汎用ボタン</button>
</p>
</form>表示
name属性
使用例
<form action="sample-button-name-value.php" method="post" target="_blank">
<p>
<button type="submit" name="sampleName" value="値Ａ">送信ボタンＡ</button>
</p>
<p>
<button type="submit" name="sampleName" value="値Ｂ">送信ボタンＢ</button>
</p>
<p>
<button type="submit" name="sampleName" value="値Ｃ">送信ボタンＣ</button>
</p>
</form>表示
popovertarget属性
使用例
<button popovertarget="menu">メニューを開く</button>
<nav id="menu" popover="auto">
<h2>メニュー</h2>
<ul>
<li><a href="https://webareba.com/">HOME</a>
<li><a href="https://webareba.com/HTML/overall-structure-of-html/">HTMLの全体構造</a>
<li><a href="https://webareba.com/HTML/basic-knowledge-of-css/">CSSの基礎知識</a>
</ul>
<button popovertarget="menu" popovertargetaction="hide" aria-label="メニューを閉じる">×</button>
</nav>表示
popovertargetaction属性
使用例
<p>
<button popovertarget="pop" popovertargetaction="show">開く</button>
<button popovertarget="pop" popovertargetaction="hide">閉じる</button>
</p>
<div popover="manual" id="pop">
<p>hide
表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしない。<p>
<p>show
非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしない。</p>
<p>toggle
既定値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとする。</p>
</div>表示
hide 表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしない。
show 非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしない。
toggle 既定値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとする。
type属性
使用例
<form action="sample-button.php" method="post" target="_blank">
<p>
<label>
１行テキスト入力欄：
<input name="sampleName">
</label>
</p>
<p>
<button>type属性なし</button>
<button type="submit">送信ボタン</button>
<button type="reset">リセットボタン</button>
<button type="button">汎用ボタン</button>
</p>
</form>表示
value属性
使用例
<form action="sample-button-name-value.php" method="post" target="_blank">
<p>
<button type="submit" name="sampleName" value="値Ａ">送信ボタンＡ</button>
</p>
<p>
<button type="submit" name="sampleName" value="値Ｂ">送信ボタンＢ</button>
</p>
<p>
<button type="submit" name="sampleName" value="値Ｃ">送信ボタンＣ</button>
</p>
</form>表示