HTML5

タグ(要素)

BUTTON

  編集:2022.06.24 by T.A.

mdn

HTML ボタンを作成。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

フレージング内容であるが、インタラクティブ内容の子孫およびtabindex属性が指定された子孫が存在してはならない。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

disabled属性

フォーム コントロールが無効にする。真偽属性

<BUTTON>テスト</BUTTON><BR>
<BUTTON disabled>テスト</BUTTON><BR>

form属性

FORM 要素とこの要素を関連付ける。

form 属性を持つ場合、その属性の値は、その要素のツリーで FORM 要素の ID でなければならない。

<FORM id=IdForm style="border:1px solid black;">
 <BUTTON>テスト</BUTTON><BR>
 <BUTTON form=IdForm>テスト</BUTTON><BR>
</FORM>
<BUTTON form=IdForm>テスト</BUTTON><BR>
FORM要素の中に入っていればform属性を指定しなくても作用するようだ。
form属性で指定しているならFORM要素の外でも作用する

formaction属性

フォーム送信に使用する URL。

潜在的にスペースで囲まれた妥当な空でない URLである値を持たなければならない。

要素が送信ボタンであり、かつそのような属性を持つ場合、要素の action はその要素の formaction 属性値である。すなわち action がそのような属性を持つ場合、そのフォーム所有者の action 属性値であり、そうでなければ空文字列である。

<FORM id=Idformaction style="border:1px solid black;">
 <BUTTON>テスト</BUTTON><BR>
 <BUTTON type=submit formaction="○○.cgi">テスト</BUTTON><BR>
</FORM>

formenctype属性

フォーム送信に使用するエントリー リストのエンコーディング タイプ。

次のキーワードおよび状態をもつ列挙属性である:

キーワード 備考
application/x-www-form-urlencoded
multipart/form-data
text/plain
<FORM id=Idformenctype style="border:1px solid black;">
 <BUTTON type=submit formenctype="text/plain">テスト</BUTTON><BR>
</FORM>

formmethod

フォーム送信に使用する変形。

以下のキーワードおよび状態をもつ列挙属性である:

キーワード 備考
get 状態 GET に対応し、HTTP GET メソッドを示す。
post 状態 POST に対応し、HTTP POST メソッドを示す。
dialog 状態 DIALOG に対応し、もしあれば、送信する form が、フォームが自身を発見するダイアログを閉じ、そうでなければ送信しないことを意図することを示す。

不正値のデフォルトは、GET 状態である。これは欠損値のデフォルトをもたない。

<FORM id=Idformmethod style="border:1px solid black;">
 <BUTTON type=submit formmethod="get">テスト</BUTTON><BR>
 <BUTTON type=submit formmethod="dialog">テスト</BUTTON><BR>
</FORM>

<BUTTON onclick="IdDialog2.open=true">DIALOG表示</BUTTON><BR>
<BUTTON onclick="IdDialog2.open=false">DIALOG閉じる</BUTTON><BR>
<DIALOG id=IdDialog2 style="border:1px solid black;">
 <BUTTON type=submit formmethod="dialog">テスト</BUTTON><BR>
</DIALOG>
¶DIALOGが閉じたりはしないようだ

formnovalidate属性

フォーム送信のためのフォームコントロール検証を回避する。真偽属性。

この属性が存在する場合、フォームが送信時に検証されないことを示す。

<FORM id=IdformnovalidateForm style="border:1px solid black;
 method="post" action="Test.cgi"
">
 <BUTTON type=submit formnovalidate>テスト</BUTTON><BR>
</FORM>

formtarget属性

フォーム送信に対するブラウジング コンテキスト。

妥当な内容名またはキーワードである値を持たなければならない。→A

<FORM id=IdformtargetForm style="border:1px solid black;
 method="post" action="Test.cgi"
">
 <BUTTON type=submit formtarget=Test>テスト</BUTTON><BR>
</FORM>

name属性

フォーム送信および form.elements API で使用する要素の名前。

フォームデータの一部としてこのボタンの value との組み合わせで送信される。

フォーム制御の名前を与える。属性が指定される場合、その値は空の文字列または isindex であってはならない。

isindex 以外で、name に対して任意の空でない値が許可される。ASCII 大文字・小文字不区別で一致する名前 _charset_ は特別である:value属性のない Hidden コントロールの名前として使用される場合、送信の間 value 属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。

<FORM id=IdnameForm style="border:1px solid black;
 method="post" action="Test.cgi"
">
 <BUTTON type=submit name=Test>テスト</BUTTON><BR>
</FORM>
¶「name=value」のデータでサーバーCGIに送信される

type属性

ボタンの種類。アクティブにされたときのボタンの振る舞いを制御する。列挙属性である。

次の表は、キーワードと属性の状態を示す。1 列目のキーワードは、キーワードと同じ行で 2 列目のセル内の状態に対応づける。

キーワード 状態 概要
submit Submit Button フォームを送信する。
reset Reset Button フォームをリセットする。
button Button 何もしない。

欠損値のデフォルトおよび不正値のデフォルトは Submit Button 状態である。

<FORM id=IdtypeForm style="border:1px solid black;">
 <INPUT value="テスト"><BR>
 <BUTTON type=reset>リセット</BUTTON><BR>
 <BUTTON type=button>ボタン</BUTTON><BR>
 <BUTTON type=submit>送信</BUTTON><BR>
</FORM>

value属性

フォーム送信に対して使用される値。

フォーム送信の目的のために要素の値を与える。存在する場合、要素の値は要素の value 属性の値であり、そうでなければ空文字列である。

<FORM id=IdvalueForm style="border:1px solid black;">
 <INPUT value="テスト" name=TestInput ><BR>
 <BUTTON type=reset>リセット</BUTTON><BR>
 <BUTTON type=button name=Test value="テスト">ボタン</BUTTON><BR>
 <BUTTON type=submit>送信</BUTTON><BR>
</FORM>
¶「name=value」のデータでサーバーCGIに送信される


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: