Sep.14th, 2020
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、フォーム関連要素(リスト化要素、ラベル付け可能要素、送信可能要素、自動大文字化継承要素)、パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ(ただし、インタラクティブ・コンテンツや“tabindex”属性を指定した要素を含むことはできません) |
| タグの省略 | 不可 |
“button”要素はボタンを表す要素です。
“button”要素の内容はボタンのラベルになります。
フォームの送信ボタンやリセットボタンとして、もしくは何かしらのスクリプトを実行するためのボタンとして使用することができます。
フォームを操作するために“button”要素を使用する場合、“form”要素の中に“button”要素を配置するか、“form”属性で“form”要素に関連付けます。
同様のボタンは“type="submit"”や“type="reset"”、“type="button"”を指定した“input”要素でも表すことができます。ただし、“input”要素ではボタンのラベルは“value”属性の属性値であるテキストであるのに対して、“button”要素はフレージング・コンテンツであればラベルとすることができるので自由度が高くなります。
サンプルコード
<form method="post" action="sample-formtag2.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域：<input type="text" name="area"></label></p>
<p><label>年齢：<input type="number" name="age"></label></p>
</fieldset>
<p>
<button type="submit">送信する</button>
<button type="reset">やり直す</button>
</p>
</form>
“button”要素の内容には“img”要素などの要素も含むことができます。
<p>
<button type="button" onclick="location.href='index.html'">
<img src="sample_s.png" alt="HTML tag ~ havin'a coffee break">
</button>
</p>
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
| disabled="" | ボタンを無効化 | disabled | ボタンを無効化 |
form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| formaction="" |
フォームに入力されたデータの送信先 | URL | フォームに入力されたデータの送信先のURL |
| formenctype="" |
フォームが送信するデータの形式 | application/x-www-form-urlencoded | 入力されたデータをURLエンコードして送信 |
| multipart/form-data | 入力されたデータをマルチパートデータとして送信 | ||
| text/plain | 入力されたデータをプレーンテキストとして送信 | ||
| formmethod="" |
フォームを送信時のHTTPメソッド | get | 入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信 |
| post | 入力されたデータをHTTPリクエストの本文として送信 | ||
dialog |
フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる | ||
| formnovalidate="" |
フォームの送信時に入力内容の妥当性をチェックしない | formnovalidate | フォームの送信時に入力内容の妥当性をチェックしない |
| formtarget="" |
フォームの送信時の応答画面の表示方法 | _blank | 新しいブラウジング・コンテキストに表示 |
| _self | 現在のブラウジング・コンテキストに表示 | ||
| _parent | 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示 | ||
| _top | 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示 | ||
| ブラウジング・コンテキスト名 | 任意のブラウジング・コンテキストに表示 | ||
| name="" | ボタンの名前 | 文字列 | ボタンの名前 |
popovertarget="" |
表示状態を切り替えるポップオーバー要素 | ID名 | 表示状態を切り替えるポップオーバー要素の“id”属性の値 |
| popovertargetaction="" |
ポップオーバー要素の表示状態の切り替え方法 | toggle | ポップオーバー要素の表示状態を切り替える |
| show | ポップオーバー要素を表示する | ||
| hide | ポップオーバー要素を閉じる | ||
| type="" | ボタンの種類 | submit | 送信ボタン |
| reset | リセットボタン | ||
| button | 既定の動作がない | ||
menu |
コンテキストメニューを表示する | ||
| value="" | ボタンの値 | 文字列 | ボタンの値 |
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| tabindex="" | フォーカスの可否とフォーカスの移動順序を指定する | 正の整数 | 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする) |
| 0 | 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする) | ||
| 負の整数 | フォーカス可能だが順次ナビゲーションには加わらない | ||
| accesskey="" | 要素にアクセスキーを割り当てる | 文字 | ユニコード1文字によるアクセスキー |
| onblur="" | フォーカスを失った時に実行されるスクリプト | スクリプト | フォーカスを失った時に実行されるスクリプト |
| onfocus="" | フォーカスされた時に実行されるスクリプト | スクリプト | フォーカスされた時に実行されるスクリプト |
| menu="" |
コンテキストメニューに関連付ける | ID名 | 関連付ける“menu”要素の“id”属性の値 |
| autofocus="" |
要素に自動的にフォーカスする | autofocus | 要素に自動的にフォーカスする |
| autofocus="" |
要素に自動的にフォーカスする | autofocus | 要素に自動的にフォーカスする |
| popoverhidetarget="" |
ポップオーバー要素を閉じる | ID名 | 非表示状態にするポップオーバー要素の“id”属性の値 |
| popovershowtarget="" |
ポップオーバー要素を表示する | ID名 | 表示状態にするポップオーバー要素の“id”属性の値 |
| popovertoggletarget="" |
ポップオーバー要素の表示状態を切り替える | ID名 | 表示状態を切り替えるポップオーバー要素の“id”属性の値 |
＃
仕様書
“button”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <button> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLButtonElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute USVString formAction;
[CEReactions] attribute DOMString formEnctype;
[CEReactions] attribute DOMString formMethod;
[CEReactions] attribute boolean formNoValidate;
[CEReactions] attribute DOMString formTarget;
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString type;
[CEReactions] attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
HTMLInputElement includes PopoverInvokerElement;
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
button {
letter-spacing: initial;
word-spacing: initial;
line-height: initial;
text-transform: initial;
text-indent: initial;
text-shadow: initial;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
