[1] HTMLHypertext Markup Language の input 要素は、 type 属性が image の時、図形的提出ボタン制御子となります。

[2] 仕様書:

[3] 属性:
属性名属性値既定値説明出典
accesskey%Character[HTML 4]
align配置[HTML 4] 非推奨
alt%Text代替文[HTML 4]
border%Pixels枠線NN2+
class級[HTML 4] %coreattrs
dir書字方向[HTML 4] %i18n
disabled(真偽値属性)(偽)無効[HTML 4]
dynsrc%URI動画資源WinIE 4+
height高さNN2+
id一意識別子[HTML 4] %coreattrs
ismap(真偽値属性)(偽)鯖側画像写像[HTML 4]
lang自然言語[HTML 4] %i18n
xml:lang自然言語[XHTML 1]
languageスクリプト言語WinIE 4+
lowsrc%URI(なし)低解像度資源WinIE 4+
name制御子名[HTML 4]
onblur%Script焦点を失した時[HTML 4]
onclick[HTML 4] %events
ondblclick[HTML 4] %events
onfocus%Script焦点を得た時[HTML 4]
onkeydown[HTML 4] %events
onkeypress[HTML 4] %events
onkeyup[HTML 4] %events
onmousedown[HTML 4] %events
onmousemove[HTML 4] %events
onmouseout[HTML 4] %events
onmouseover[HTML 4] %events
onmouseup[HTML 4] %events
src%URI埋込み資源[HTML 4]
styleスタイル情報[HTML 4] %coreattrs
tabindexNUMBERタブ順[HTML 4]
title注釈的題[HTML 4] %coreattrs
typeimagetext制御子の種類[HTML 4]
usemap%URIクライアント側画像写像[HTML 4]
value初期値[HTML 4]
width幅NN2+

[11] 意味的に src 属性は必須でしょう。

また、著者は代替文を alt 属性で提供するべきです。 HTML 4 17.4.1

名前

[4] 制御子名は name 属性によって指定します。 name 属性は省略可能です。

初期値, 現在値

[5] 指向装置をかちっすると、フォームは提出されます。 この時、かちっした座標 (x 座標は左、 y 座標は上からの画素数) が提出されます。 HTML 4 17.4.1

[12] マウスなどの装置で座標を選べない時にはどうするのか規定されていません。 ismap のように (0, 0) とでもするのでしょうか、それともそのような場合 image で提出はできないのでしょうか。

[15] 1996年に発表された W3C NOTE >>14 では、 tstname.x=&tstname.y= のように空の値を提出するべきことと、 既存の UA との互換性のために鯖側は座標 (0, 0) をそれと等価に扱うべきことを述べていました。 (後者の方法は非推奨とされていました。)

ただし、後の HTML 4 のフォーム提出方法では、 現在値が空の時は成功と見なさないべきであることが規定されています。 この仕様との整合性的にも、現実の実装的にも、空の値の方法は今となっては好ましくないでしょう。

UA利用者エージェント による利用

[6] 提出ボタンを活性化すると、フォームは提出されます。 HTML 4 17.2.1

[10] src 属性によって指定された画像はボタンを飾るのに使われます。 HTML 4 17.4.1 画像の代替文が alt 属性により提供されます。

[13] button によるボタンは起伏をつけて構いません。 input によるボタンは起伏をつけなくて構いません。 HTML 4 17.5

この規定は、多くの視覚UA で button はその環境のボタン制御子に似せて、 input type image は画像だけで枠無しでレンダリングされることを言っているのでしょう。

[17] >>12 Lynxは座標 (0, 0) として提出します。

Lynx Users Guide v2.7.1 http://leb.net/blinux/blynx/Lynx_users_guide.html#19

(名無しさん [sage])

[18] >>17 そのLynxの手引きによると、以前はsubmit同様にnameとvalueの組を提出していましたが、そのようにHTMLの仕様で規定する提案が認められなかったため原点で提出する現在の仕様に改められたそうです。 (名無しさん [sage])

他との関係

[11] 画像による提出ボタンで、 かちっした座標を鯖側で利用することができます (鯖側画像写像)。しかし、画像に対応していない UA や、 対応していてもマウスなどで座標を選べない場合には、 利用者が不利益を被りかねません。

鯖側画像写像として使いたい場合には、複数の提出ボタンを用意したり、 スクリプトとクライアント側画像写像を組合せるなどして、 そのような場合にも配慮するべきです。 HTML 4 17.4.1

[7] 提出ボタンは1つのフォームに任意個 (零個以上) 用意できます。

提出ボタンは type が submit の input 要素や type が submit の button 要素でも定義できます。 (button 要素の方が新しい分高機能です。) type が submit の input は札に文字しか使えませんが、 button はほとんどなんでも (もちろん画像も) 使えます。

フォームの提出は提出ボタンの他、 UA利用者エージェント 依存の方法でも行えるかもしれません。 また、スクリプトによっても行えるかもしれません。

[8] フォームとは関係ない画像写像は、 img 要素や object 要素と a 要素を組合せて実現できます。

歴史

[14] Imagemapped Images and Image-Incapable User Agents, http://www.w3.org/TR/NOTE-imagemap, 発表当時の URI統一資源識別子 は http://www.w3.org/pub/WWW/TR/NOTE-imagemap-961127。 Status of this document によれば現在の W3CWorld Wide Web Consortium WD作業原案 のような位置付けだったらしいのですが、 2004年現在、 http://www.w3.org/TR/ によれば Working Group Note に分類されています。同時期の他の HTMLHypertext Markup Language 系 WD作業原案 とは異なり、直接 HTMLHypertext Markup Language 4 仕様書に取込まれてはいないようです。

[16] HTMLHypertext Markup Language 4 B.6.2 は、 将来の拡張の一案として、 クライアント側画像写像を使えるように usemap 属性を追加するのがよいかもしれないと述べていました。 それにあわせて、位置に対応する area 要素が鯖に渡す値・座標を提供できるように拡張することも提案されていました。

メモ

[19] Bug 388794 – No x/y coords sent when an image input without an image frame is triggered (2008-10-30 16:15:14 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=388794 (名無しさん)

[20] Image controls and form submission (Boris Zbarsky 著, 版) http://lists.w3.org/Archives/Public/public-html/2007Sep/0345.html (名無しさん)

[21] Web Applications 1.0 r7614 Make width/height attributes not apply to <input type=image src=404> so that the button text doesn't get cut off in the common case. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7613&to=7614

[22] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L281

[9] Integrate Fetch into HTML · whatwg/html@7c5555a ( 版) https://github.com/whatwg/html/commit/7c5555a16f2920c02244c10756bb2f1a11e87a22

[23] Make forms work in shadow trees ( (annevk著, )) https://github.com/whatwg/html/commit/927fda0f305452a9c54a25d3ebf9a6ed5ae29fd3

[24] Align Fetch's destination concept with changes in Fetch (sideshowbarker著, ) https://github.com/whatwg/html/commit/5e8f96a85d182d36c177db0d6fdde58b4ded86d4

[25] Rendering: update when an image creates a replaced box (emilio著, ) https://github.com/whatwg/html/commit/f9e4c660c84a7ec08f2c107390a5a157f02611b0

[26] rendering: Update the conditions where an image creates a replaced box. by emilio · Pull Request #4406 · whatwg/html () https://github.com/whatwg/html/pull/4406

[27] Editorial: add a note for image button command labeling (scottaohara著, ) https://github.com/whatwg/html/commit/1bd83a335dedb6a30c6a8609ec36fe390a23fdb3

[28] Editorial: add note for input command labeling by scottaohara · Pull Request #4829 · whatwg/html () https://github.com/whatwg/html/pull/4829

[29] clarification of value attribute on input type=image · Issue #4815 · whatwg/html () https://github.com/whatwg/html/issues/4815