[1] [ABBR[[[HTML]]] [Hypertext Markup Language]] の
[CODE(HTMLe)[[[input]]]] 要素は、 [CODE(HTMLa)[[[type]]]]
属性が [DFN[[CODE(HTML)[image]]]] の時、図形的[DFN[提出ボタン制御子]]となります。
[2] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[submit buttons]]
-- [CITE[17.4 The [CODE(HTMLe)[INPUT]] element]]
-- [CITE[B.6.2 Future projects]]
[3] 属性:
,属性名 ,属性値 ,既定値 ,説明 ,出典
,[CODE(HTMLa)[[[accesskey]]]] ,[CODE(SGML)[%[[Character]]]] , , ,[HTML 4]
,[CODE(HTMLa)[[[align]]]] , , ,配置 ,[HTML 4] 非推奨
,[CODE(HTMLa)[[[alt]]]] ,[CODE(SGML)[%[[Text]]]] , ,[[代替文]] ,[HTML 4]
,[CODE(HTMLa)[[[border]]]] ,[CODE(SGML)[%[[Pixels]]]] , ,枠線 ,[[NN2]]+
,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML 4] %[[coreattrs]]
,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML 4] %[[i18n]]
,[CODE(HTMLa)[[[disabled]]]] ,(真偽値属性) ,(偽) ,無効 ,[HTML 4]
,[CODE(HTMLa)[[[dynsrc]]]] ,[CODE(SGML)[%[[URI]]]] , ,動画資源 ,[[WinIE 4]]+
,[CODE(HTMLa)[[[height]]]] , , ,高さ ,[[NN2]]+
,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[ismap]]]] ,(真偽値属性) ,(偽) ,鯖側画像写像 ,[HTML 4]
,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML 4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML 1]
,[CODE(HTMLa)[[[language]]]] , , ,スクリプト言語 ,[[WinIE 4]]+
,[CODE(HTMLa)[[[lowsrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,低解像度資源 ,[[WinIE 4]]+
,[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)[[[src]]]] ,[CODE(SGML)[%[[URI]]]] , ,埋込み資源 ,[HTML 4]
,[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)[image]]''' ,[CODE(HTML)[[[text]]]] ,制御子の種類 ,[HTML 4]
,[CODE(HTMLa)[[[usemap]]]] ,[CODE(SGML)[%[[URI]]]] , ,クライアント側画像写像 ,[HTML 4]
,[CODE(HTMLa)[[[value]]]] , , ,初期値 ,[HTML 4]
,[CODE(HTMLa)[[[width]]]] , , ,幅 ,[[NN2]]+
[11] 意味的に [CODE(HTMLa)[src]] 属性は必須でしょう。
また、[[著者]]は[[代替文]]を [CODE(HTMLa)[alt]]
属性で提供するべきです。
[SRC[HTML 4 17.4.1]]
[[#comment]]
* 名前
[4] 制御子名は [CODE(HTMLa)[name]] 属性によって指定します。
[CODE(HTMLa)[name]] 属性は省略可能です。
[[#comment]]
* 初期値, 現在値
[5] 指向装置を[[かちっ]]すると、フォームは提出されます。
この時、かちっした座標 ([VAR(math)[x]] 座標は左、
[VAR(math)[y]] 座標は上からの画素数) が提出されます。
[SRC[HTML 4 17.4.1]]
[12]
マウスなどの装置で座標を選べない時にはどうするのか規定されていません。
[CODE(HTMLa)[[[ismap]]]] のように [SAMP(math)[(0, 0)]]
とでもするのでしょうか、それともそのような場合 [CODE(HTML)[image]]
で提出はできないのでしょうか。
[15] 1996年に発表された W3C NOTE >>14 では、
[SAMP[tstname.x=&tstname.y=]] のように空の値を提出するべきことと、
既存の UA との互換性のために鯖側は座標 [CODE(math)[(0, 0)]]
をそれと等価に扱うべきことを述べていました。 (後者の方法は非推奨とされていました。)
ただし、後の HTML 4 のフォーム提出方法では、
[[現在値]]が空の時は[[成功]]と見なさないべきであることが規定されています。
この仕様との整合性的にも、現実の実装的にも、空の値の方法は今となっては好ましくないでしょう。
[[#comment]]
* [ABBR[UA] [利用者エージェント]] による利用
[6] 提出ボタンを[[活性化]]すると、フォームは[[提出]]されます。
[SRC[HTML 4 17.2.1]]
[10] [CODE(HTMLa)[src]] 属性によって指定された画像はボタンを飾るのに使われます。
[SRC[HTML 4 17.4.1]] 画像の[[代替文]]が [CODE(HTMLa)[[[alt]]]]
属性により提供されます。
[13] [CODE(HTMLe)[[[button]]]] によるボタンは起伏をつけて構いません。
[CODE(HTMLe)[input]] によるボタンは起伏をつけなくて構いません。
[SRC[HTML 4 17.5]]
この規定は、多くの[[視覚UA]] で [CODE(HTMLe)[button]]
はその環境のボタン制御子に似せて、
[CODE(HTMLe)[input]] [CODE(HTMLa)[type]] [CODE(HTML)[image]]
は画像だけで枠無しでレンダリングされることを言っているのでしょう。
[17]
>>12 [[Lynx]]は[[座標]] [CODE(math)[(0, 0)]] として[[提出]]します。
;; [CITE[Lynx Users Guide v2.7.1]]
([[名無しさん]] [sage])
[18]
>>17 その[[Lynx]]の手引きによると、以前は[CODE(HTML)@en[[[submit]]]]同様に[CODE(HTMLa)@en[[[name]]]]と[CODE(HTMLa)@en[[[value]]]]の組を[[提出]]していましたが、そのように[[HTML]]の仕様で規定する提案が認められなかったため[[原点]]で[[提出]]する現在の仕様に改められたそうです。
([[名無しさん]] [sage])
[[#comment]]
* 他との関係
[11] 画像による提出ボタンで、
[[かちっ]]した座標を鯖側で利用することができます
([[鯖側画像写像]])。しかし、画像に対応していない UA や、
対応していても[[マウス]]などで座標を選べない場合には、
利用者が不利益を被りかねません。
鯖側画像写像として使いたい場合には、複数の提出ボタンを用意したり、
スクリプトと[[クライアント側画像写像]]を組合せるなどして、
そのような場合にも配慮するべきです。 [SRC[HTML 4 17.4.1]]
[7] 提出ボタンは1つのフォームに任意個 [WEAK[(零個以上)]] 用意できます。
提出ボタンは [CODE(HTMLa)[[[type]]]] が [CODE(HTML)[[[submit]]]]
の [CODE(HTMLe)[[[input]]]] 要素や [CODE(HTMLa)[type]]
が [CODE(HTML)[submit]] の [CODE(HTMLe)[[[button]]]]
要素でも定義できます。
[WEAK[([CODE(HTMLe)[button]] 要素の方が新しい分高機能です。)]]
[CODE(HTMLa)[type]] が [CODE(HTML)[submit]] の [CODE(HTMLe)[[[input]]]]
は札に文字しか使えませんが、 [CODE(HTMLe)[button]]
はほとんどなんでも (もちろん画像も) 使えます。
フォームの提出は提出ボタンの他、
[ABBR[UA] [利用者エージェント]] 依存の方法でも行えるかもしれません。
また、スクリプトによっても行えるかもしれません。
[8] フォームとは関係ない[[画像写像]]は、 [CODE(HTMLe)[[[img]]]]
要素や [CODE(HTMLe)[[[object]]]] 要素と [CODE(HTMLe)[[[a]]]]
要素を組合せて実現できます。
[[#comment]]
* 歴史
[14] [CITE[Imagemapped Images and Image-Incapable User Agents]],
, 発表当時の
[ABBR[URI] [統一資源識別子]] は
。
[Q[Status of this document]] によれば現在の
[ABBR[W3C] [World Wide Web Consortium]]
[ABBR[[[WD]]] [作業原案]] のような位置付けだったらしいのですが、
2004年現在、 によれば
[[Working Group Note]] に分類されています。同時期の他の
[ABBR[HTML] [Hypertext Markup Language]] 系
[ABBR[WD] [作業原案]] とは異なり、直接
[ABBR[HTML] [Hypertext Markup Language]] 4
仕様書に取込まれてはいないようです。
[16] [ABBR[HTML] [Hypertext Markup Language]] 4 B.6.2 は、
将来の拡張の一案として、
クライアント側画像写像を使えるように [CODE(HTMLe)[[[usemap]]]]
属性を追加するのがよいかもしれないと述べていました。
それにあわせて、位置に対応する [CODE(HTMLe)[[[area]]]]
要素が鯖に渡す値・座標を提供できるように拡張することも提案されていました。
[[#comment]]
* メモ
[19]
[CITE[Bug 388794 – No x/y coords sent when an image input without an image frame is triggered]] ([CODE[2008-10-30 16:15:14 +09:00]] 版)
([[名無しさん]])
[20]
[CITE@en[Image controls and form submission]] ([[Boris Zbarsky]] 著, [TIME[2007-09-14 15:19:50 +09:00]] 版)
([[名無しさん]])
[21] [CITE@en[Web Applications 1.0 r7614 Make width/height attributes not apply to so that the button text doesn't get cut off in the common case.]]
( ([TIME[2012-12-31 04:35:00 +09:00]] 版))
[22] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:31:10 +09:00]] 版))
[9] [CITE@en[Integrate Fetch into HTML · whatwg/html@7c5555a]]
([TIME[2015-09-18 19:14:47 +09:00]] 版)
[23] [CITE@en[Make forms work in shadow trees]]
( ([[annevk]]著, [TIME[2016-05-12 00:45:25 +09:00]]))
[24] [CITE@en[Align Fetch's destination concept with changes in Fetch]]
([[sideshowbarker]]著, [TIME[2016-07-05 02:46:14 +09:00]])
[25] [CITE@en[Rendering: update when an image creates a replaced box]]
([[emilio]]著, [TIME[2019-03-04 22:56:32 +09:00]])
[26] [CITE@en[rendering: Update the conditions where an image creates a replaced box. by emilio · Pull Request #4406 · whatwg/html]]
([TIME[2019-07-22 11:49:37 +09:00]])
[27] [CITE@en[Editorial: add a note for image button command labeling]]
([[scottaohara]]著, [TIME[2019-08-24 04:12:20 +09:00]])
[28] [CITE@en[Editorial: add note for input command labeling by scottaohara · Pull Request #4829 · whatwg/html]]
([TIME[2020-01-12 16:57:08 +09:00]])
[29] [CITE@en[clarification of value attribute on input type=image · Issue #4815 · whatwg/html]]
([TIME[2020-01-12 16:57:19 +09:00]])