* button 要素型 (HTML, XHTML 1)

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

[5] 仕様書:
- [[HTML 4]]
-- 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]
: [[開始タグ]]: 必須
: [[終了タグ]]: 必須
: [[内容模型]]: [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)[[[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]]]]
の説明も参照してください。

[[#comment]]

* メモ