Edit

Page

Page title:

Page body:

[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]]]] な文脈
(歴史的変遷: <https://suika.suikawiki.org/www/2004/html/content-button>)

* 属性

[FIG(short list)[ [20]

[HISTORY[
- [CODE(HTMLa)@en[menu][<button menu>]]
]HISTORY]
]FIG]

,[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]

* 内容

[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]]

[37] 
[CODE[op]] (独自[[XML名前空間]])

* 処理

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

* [CODE(DOMi)@en[HTMLButtonElement]] インターフェイス

[18] [CODE(DOMi)@en[[[Node]]]],
[CODE(DOMi)@en[[[Element]]]],
[CODE(DOMi)@en[[[HTMLElement]]]]

,[CODE(DOMm)@en[[[createTextRange]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[form]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[name]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[onresize]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[status]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[type]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])
,[CODE(DOMa)@en[[[value]]]]	,[CODE(DOMi)@en[[[HTMLButtonElement]]]] ([[WinIE 4]])

[HISTORY[
- [CODE(DOMa)@en[menu][<button type=menu>]]
]HISTORY]

* 関連

[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}]]
のような意味不明な表示になってしまいます。

[14]
[PRE(HTML invalid example code)[
<a href="intr/metal.mpg"><button type="button" name="video" value="push"  style="color=#FFFFFF; background-color: #FFFFCC; font-weight: bold;">
<p align="center">
<font size="3">金属工学科紹介ビデオ<br>(mpeg, 91.6MB)</font>
</button></a>
</p>
]PRE]

[[リンク]]を[[ボタン]]風にしたかったのでしょうか・・・。

;; [CITE@ja[東京工業大学金属工学科&#65381;材料工学専攻(金属分野)]] 
([CODE[2006-12-27 16:07:51 +09:00]] 版) 
<http://www.mtl.titech.ac.jp/metal-j.html>

* 歴史

[38] [CITE[Design Issues for HTML Forms]], [TIME[1999-02-04T17:41:10.000Z]], [TIME[2024-08-25T03:32:27.452Z]] <https://www.w3.org/TR/WD-forms-960308.html>

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[button]]
:日付:[TIME[1996-03-08]]
:説明:
[TIME[1996-03-08]]付 [[W3C]] 文書で
[CODE[button]]
が提案されていた。
:出典:
[REFS[

-
[CITE[Design Issues for HTML Forms]], 
[DATA(.author)[[[W3C]]]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[08-Mar-96][1996-03-08]],
[TIME[1999-02-04T17:41:10.000Z]], [TIME[2024-08-25T03:33:02.026Z]] <https://www.w3.org/TR/WD-forms-960308.html>

]REFS]
:参照:[CODE[button]]
:参照:[CODE[doneinput]]

]FIG]

[42] [[Cougar]] にはなし。

[FIG(data)[ [43] [[HTML要素概説]]

:[F[要素名]]:[CODE[button]]
:日付:[TIME[1997-07-08]]
:説明:
[TIME[1997-07-08]]の最初の [CITE[HTML 4.0]]
公開版に
[CODE[button]]
がある。
[SRC[HTML4-19970708:Forms]]
:出典:
[REFS[

-
[DFN[HTML4-19970708:Forms]]:
[CSECTION@en[Forms in HTML documents]], 
[CITE@en[HTML 4.0 Specification]],
[DATA(.author)[[[W3C]]]],
[TIME(.published)[1997-07-08T12:32:52.000Z]], [TIME[2024-10-05T07:19:36.891Z]] <https://www.w3.org/TR/WD-html40-970708/interact/forms.html>

]REFS]

]FIG]

** メモ

[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])

[13]
[CITE@ja[2005/02/19 自宅 「<button> と MSIE の関係に疲れ果てる」]] ([CODE[2005-02-21 23:21:32 +09:00]] 版) <http://fromto.cc/hosokawa/diary/2005/20050219-home/>
([[名無しさん]])

[15]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070414]] ([CODE[2007-04-14 17:00:39 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20070414#l-140>
([[名無しさん]] [WEAK[2007-04-14 08:26:11 +00:00]])

[16]
[CITE[Particletree &#187; Rediscovering the Button Element]] ([TIME[2007-05-17 19:51:47 +09:00]] 版) <http://particletree.com/features/rediscovering-the-button-element/>
([[名無しさん]] [WEAK[2007-05-17 11:20:23 +00:00]])

* button 要素 type 属性 (HTML, XHTML 1)

[73] [[HTML]] の [CODE(HTMLe)[[[button]]]] 要素の
[DFN[[CODE(HTMLa)[type]] 属性]]は、ボタンの型を指定します。

[74] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLe)[button]] 要素 [CODE(HTMLa)[type]] 属性

[[#comment]]

** 属性値

[75] この属性は[[列挙型]]です。

,属性値	,説明	,出典
,[CODE(HTML)[[[button]]]]	,押しボタン	,[HTML 4]
,[CODE(HTML)[[[reset]]]]	,再設定ボタン	,[HTML 4]
,[CODE(HTML)[[[submit]]]]	,提出ボタン	,[HTML 4]

[76] この属性は省略可能です。省略時の既定値は [CODE(HTML)[submit]]
です。

** 実装

[78] [CITE[Index of /~wakaba/-temp/test/dom/html-button-element/type]] ([TIME[2008-12-16 10:21:40 +09:00]] 版) <https://suika.suikawiki.org/~wakaba/-temp/test/dom/html-button-element/type/>

[79] 
[CODE(DOMa)@en[[[type]]]] [[DOM属性]]に値を設定 (set-1.html):
[[Firefox]]、[[Opera]] は PASS。[[WinIE7]] は値を設定するところで[[実行時エラー]]。
[[Safari]] 3.2.1 と [[Chrome]] 0.4.154.29 はエラーにはならないが、[[属性値]]は変化しない。

[80] 
[CODE(DOMm)@en[[[setAttribute]]]] を使って [CODE(HTMLa)@en[[[type]]]] [[内容属性]]に値を設定 (set-attribute-1.html):
全ブラウザ PASS。

** メモ

[77] [CODE(HTMLe)[input]] 要素の [CODE(HTMLa)[type]] 属性
と値をあわせたのでしょうが、 [SAMP(HTML)[<[CODE(HTMLe)[button]] [CODE(HTMLa)[type]]="button">]]
というのは格好が悪い。

** HTML5

[40] 
[CITE@en['''['''''']''' (0) WF2: <button> element summary, fixes to <input> to correct cop…]], [[Hixie]], [TIME[2008-09-03 20:05:36 +09:00]], [TIME[2024-09-04T13:02:10.000Z]] <https://github.com/whatwg/html/commit/fe5d39724d647c0ab3d7bb11f9149800c9edd7bd>

[FIG(data)[ [39] [[HTML要素概説]]

:[F[要素名]]:[CODE[button]]
:日付:[TIME[2008-09-03]]
:説明:
[TIME[2008-09-03]]、
[CITE[HTML5]]
に
[CODE[button]]
が追加された。
:出典:
[REFS[

-
[CITE[HTML5 r2145]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2008-09-03 20:05:36 +09:00]], [TIME[2024-09-04T13:02:10.000Z]] <https://github.com/whatwg/html/commit/fe5d39724d647c0ab3d7bb11f9149800c9edd7bd>

]REFS]

]FIG]

[81] [CITE@en[Web Applications 1.0 r5293     Forgot to remove <button> from the main scoping list. Please let me know ASAP if this change breaks anything.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10223]]
( ([TIME[2010-08-17 03:27:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5292&to=5293>

[82] [CITE[''''''[''''''whatwg'''''']'''''' Alignment of empty buttons]]
( ([TIME[2013-07-13 09:28:35 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-July/040046.html>

[83] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#button>

[84] [CITE@en[1089326 – event.target refers to parent BUTTON instead of clicked IMG when IMG is child of BUTTON (Selecting different views of the product is not possible in www.myntra.com)]]
( ([TIME[2014-12-23 12:32:59 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=1089326>

[17] [CITE@en[Remove the concept of CSS Bindings]]
([[annevk]]著, [TIME[2016-07-08 02:00:41 +09:00]])
<https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94>

[19] [CITE@en[Remove <button type=menu>]]
([[domenic]]著, [TIME[2017-02-09 23:55:10 +09:00]])
<https://github.com/whatwg/html/commit/916e1b9f6bea48cb117ddd056ea025adaa629384>

[21] [CITE@ja[<a>か<button>か - hitode909の日記]]
([TIME[2017-12-07 17:56:21 +09:00]])
<http://blog.sushi.money/entry/2017/12/07/141717>

[22] [CITE@en[Fix form inheritance behavior for autocapitalize]]
([[rlanday]]著, [TIME[2018-01-25 08:58:12 +09:00]])
<https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266>

[23] [CITE@en[Editorial: always state invalid value default]]
([[GloverDonovan]]著, [TIME[2018-03-05 13:36:29 +09:00]])
<https://github.com/whatwg/html/commit/7e941ae96b264d4743ea0afac00c3b3209ab0cde>

[24] [CITE@en[Queue a task to run all the autofocusing steps]]
([[domenic]]著, [TIME[2018-03-07 14:32:39 +09:00]])
<https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594>

[25] [CITE@en[<button> should be transparent content model like <a> · Issue #3765 · whatwg/html]]
([TIME[2018-06-27 13:44:25 +09:00]])
<https://github.com/whatwg/html/issues/3765>

[26] [CITE@en[Define button layout]]
([[zcorpan]]著, [TIME[2019-05-14 22:52:17 +09:00]])
<https://github.com/whatwg/html/commit/6780c22fccb41f5d84aa079d2644c79b1acdc5eb>

[27] [CITE@en[Define that button text is centered vertically · Issue #1024 · whatwg/html]]
([TIME[2019-12-06 16:58:42 +09:00]])
<https://github.com/whatwg/html/issues/1024>

[28] [CITE@en[HTML spec is unclear about how buttons are sized in non-inline contexts (and browsers disagree) · Issue #2948 · whatwg/html]]
([TIME[2019-12-06 16:59:00 +09:00]])
<https://github.com/whatwg/html/issues/2948>

[29] [CITE@en[Rendering rules for buttons · Issue #4081 · whatwg/html]]
([TIME[2019-12-06 16:59:39 +09:00]])
<https://github.com/whatwg/html/issues/4081>

[30] [CITE@en[Default 'display' value for form controls · Issue #4082 · whatwg/html]]
([TIME[2019-12-06 17:00:46 +09:00]])
<https://github.com/whatwg/html/issues/4082>

[31] [CITE@en[962936 - Implement button layout per HTML rendering spec - chromium - An open-source project to help move the web forward. - Monorail]]
([TIME[2019-12-06 17:01:51 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=962936>

[32] [CITE@en[197879 – Implement button layout per HTML rendering spec]]
([TIME[2019-12-06 17:02:08 +09:00]])
<https://bugs.webkit.org/show_bug.cgi?id=197879>

[33] [CITE@en[1539469 - Make <input> elements display: inline-block by default (was: Fix WPT: testing/web-platform/tests/html/semantics/forms/the-input-element/input-width.html)]]
([TIME[2019-12-06 17:02:19 +09:00]])
<https://bugzilla.mozilla.org/show_bug.cgi?id=1539469>

[34] [CITE@en[Define button layout by zcorpan · Pull Request #4143 · whatwg/html]]
([TIME[2019-12-06 17:02:53 +09:00]])
<https://github.com/whatwg/html/pull/4143>

[35] [CITE@en[Do not inherit text-transform (et al.) on form controls]]
([[jugglinmike]]著, [TIME[2019-08-29 19:14:53 +09:00]])
<https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f>

[36] [CITE@en[Define what tabIndex returns when the tabindex attribute is not set]]
([[rakina]]著, [TIME[2019-07-10 03:13:55 +09:00]])
<https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)