说起图形系，可能有人马上想到<input type="image">，可惜那是谬误，不要想当然，那是一个提交按钮。HTML有多少提交按钮，如不写type属性的button标签，type="submit"的input标签，还有type="image"的input标签。
不过,input[type=image]在提交时，会将提交时点击按钮的offset坐标也提交上去。
x 坐标将以控件名称后加 .x 提交，y 坐标将以空间名称后加 .y 提交
<input type="image" name="aaa" value="333">
可能提交数据为aaa.x=99&aaa.y=109, value值会被忽略。这可以用判定是否真实用户提交。
言归正转，真实的图形系表单元素是指area与map元素。
<img src="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>
这个整体叫做图片映射。map元素的name值等于usemap的值，当然usemap会多了一些东西。当我们点击img标签时，实标上点到浮在它上面的map元素上。map元素上也浮着更多area元素。通常我们的元素都是四四方方的，而这些area元素则可以是椭圆形，三角形，多边形。。。
下面列出了每种形状的适当值：
-
圆形：shape="circle"，coords="x,y,z"：这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
-
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."：每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
-
矩形：shape="rectangle"，coords="x1,y1,x2,y2"：第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
更多用法可以见MDN官网
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/area
但是近十年来，随着SVG的崛起，他们俩功能重复，于是功能够弱的area，map元素就没落了。
相关链接
http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html