-
Notifications
You must be signed in to change notification settings - Fork 4
/
390.txt
267 lines (199 loc) · 11.4 KB
/
390.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
[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>)
* 属性
[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]]
[[#comment]]
** UA による利用
[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[東京工業大学金属工学科･材料工学専攻(金属分野)]]
([CODE[2006-12-27 16:07:51 +09:00]] 版)
<http://www.mtl.titech.ac.jp/metal-j.html>
[[#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])
[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 » 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]] 版) <http://suika.fam.cx/~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">]]
というのは格好が悪い。
[[#comment]]
[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>