* [CODE(HTMLe)[button]] 要素型 (HTML, XHTML 1)

[4] [[HTML]] の [DFN[[CODE(HTMLe)[button]] 要素]]は、
[DFN[ボタン制御子]]を作成します。

[5] 仕様書:
= [[HTML 4]] ([[Web Forms 1.0]])
-- [CSECTION[17.5 The [CODE(HTMLe)[BUTTON]] element]]
<IW:HTML4:"interact/forms.html#edef-BUTTON">
= [[XHTML 1.0]]
-- <http://www.w3.org/TR/xhtml1/#prohibitions>

[6]
:状態:[[W3C]] [[勧告]]
:[[名前空間URI]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)[button]] ([Q@en[button]] ([Q[ボタン]]) より)
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:[[内容模型]]:[CODE(SGML)[(%[[flow]];)* −([CODE(HTMLe)[[[a]]]] | %[[formctrl]]; | [CODE(HTMLe)[[[form]]]] | [CODE(HTMLe)[[[fidleset]]]] | [CODE(HTMLe)[[[isindex]]]] | [CODE(HTMLe)[[[iframe]]]] | [[画像写像]])]]
:出現できる文脈:[CODE(SGML)[%[[formctrl]]]] な文脈
(歴史的変遷: <http://suika.fam.cx/www/2004/html/content-button>)
:[[属性]]:
,属性名	,属性値	,既定値	,状態	,出典
,[CODE(HTMLa)[[[accesskey]]]]	,[CODE(SGML)[%[[Character]]]]	,	,	,[HTML 4]
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML 4] %[[coreattrs]]
,[CODE(HTMLa)[[[datafld]]]]	,	,	,データ欄名	,[HTML 4] 予約
,[CODE(HTMLa)[[[dataformatas]]]]	,	,[CODE(HTML)[[[plaintext]]]]	,データ書式	,[HTML 4] 予約
,[CODE(HTMLa)[[[datasrc]]]]	,[CODE(SGML)[%[[URI]]]]	,	,データ源	,[HTML 4] 予約
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML 4] %[[i18n]]
,[CODE(HTMLa)[[[disabled]]]]	,([[真偽値属性]])	,([[偽]])	,無効	,[HTML 4]
,[CODE(HTMLa)@en[[[dojotype]]]],,,,"非標準","[[Dojo]]"
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML 4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML 1]
,[CODE(HTMLa)[[[name]]]]	,	,	,制御子名	,[HTML 4]
,[CODE(HTMLa)[[[onblur]]]]	,[CODE(SGML)[%[[Script]]]]	,	,失焦点時	,[HTML 4]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML 4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onfocus]]]]	,[CODE(SGML)[%[[Script]]]]	,	,得焦点時	,[HTML 4]
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML 4] %events
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[tabindex]]]]	,[CODE(SGML)[[[NUMBER]]]]	,	,タブ順	,[HTML 4]
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[type]]]]	,	,[CODE(HTML)[[[submit]]]]	,ボタン種	,[HTML 4]
,[CODE(HTMLa)[[[value]]]]	,	,	,提出ボタン初期値	,[HTML 4]


[[#comment]]


** 内容

[7] 内容はボタンの[RUBY[札] [ラベル]]になります。

[2] [CODE(HTMLe)[button]] 要素の子孫に[[画像写像]]を入れることは違法です
[SRC[HTML 4 17.5]]。

[3] [CODE(HTMLe)[button]] 要素の子孫に [CODE(HTMLe)[[[input]]]], [CODE(HTMLe)[[[select]]]], [CODE(HTMLe)[[[textarea]]]], [CODE(HTMLe)[button]], [CODE(HTMLe)[[[isindex]]]], [CODE(HTMLe)[[[label]]]], [CODE(HTMLe)[[[form]]]], [CODE(HTMLe)[[[fieldset]]]], [CODE(HTMLe)[[[iframe]]]] 各要素は存在できません。 
[SRC[XHTML 1.0]]

[[#comment]]


** UA による利用

[8] 視覚 UA は、 [CODE(HTMLe)[button]] の周りに起伏をつけてレンダリングして、
[[かちっ]]にあわせて上下させて構いません。対して [CODE(HTMLe)[[[input]]]]
によるボタンは平らな画像にレンダリングして構いません。
[SRC[HTML 4 17.5]]

[[#comment]]


** 他との関係

[1] ボタン制御子は、 [CODE(HTMLe)[button]] 要素型だけではなく、
[CODE(HTMLe)[[[input]]]] 要素型でも、 [CODE(HTMLa)[[[type]]]]
属性を [CODE(HTML)[[[submit]]]] や [CODE(HTML)[[[reset]]]]
や [CODE(HTML)[[[button]]]] と指定することで作成できます。

両要素型の違いは、歴史的事情 (古い UA は [CODE(HTMLe)[button]] に対応していない。)
と札の指定の柔軟性 ([CODE(HTMLe)[input]] では札は [CODE(HTMLa)[[[value]]]]
属性値と同じ。) です。

[[#comment]]


** 例

[9] 絵つきボタンの例 [SRC[HTML 4 17.5]]
[PRE(HTML)[
 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <BUTTON name="submit" value="submit" type="submit">
    Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
    <BUTTON name="reset" type="reset">
    Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
    </P>
 </FORM>
]PRE]

この例は、[[代替文]]が不適切だと考えられます。
非図形的 UA では例えば [SAMP[Send{wow}]]
のような意味不明な表示になってしまいます。

[[#comment]]


** メモ

[10] 提出ボタン ([CODE(HTML)[submit]]) についてはフォームの[[提出]]や
[[[CODE(HTMLe)[input]]//[CODE(HTML)[submit]]]] や
[[[CODE(HTMLe)[input]]//[CODE(HTML)[image]]]] の説明、
再設定ボタン ([CODE(HTML)[reset]]) についてはフォームの[[再設定]]や
[[[CODE(HTMLe)[input]]//[CODE(HTML)[reset]]]] の説明、
押しボタンについては [[[CODE(HTMLe)[input]]/[CODE(HTML)[button]]]]
の説明も参照してください。

[11]
[CITE[猫式Webメモ]] <http://d.hatena.ne.jp/nekoshiki/20040601#p1>

> 押すか押さないかに関わらず全てのボタンに割り当てられたフォームデータを送信してしまう。

[12]
[CITE[Reread : IE の button 要素の扱いがあまりに酷い件]] <http://text.readalittle.net/article.php?id=81>
([[名無しさん]] [sage])


[[#comment]]


* メモ