最推荐使用 方式，语义清晰、无障碍友好、不提交多余坐标；若需坐标则用 ，但需注意 name 必填、src 必设及后端处理坐标字段。
用 <input type="image"> 最直接，但要注意坐标提交行为
HTML 原生支持图片按钮提交，不需要 JS 或额外 CSS 就能工作。核心是使用 <input type="image">，它会渲染为可点击的图片，并在点击时自动提交包裹它的 <form></form>。
关键点在于：点击后浏览器会把鼠标相对于图片左上角的坐标作为两个额外字段提交，字段名是 name 值加上 .x 和 .y 后缀。例如 <input type="image" name="submit_btn" src="go.png"> 点击坐标 (12, 5) 时，实际提交的数据包含 submit_btn.x=12 和 submit_btn.y=5。
- 必须设置
src属性，否则显示为空白或默认占位符 -
name属性不能省略，否则坐标字段不会生成（后端收不到） - 不支持
value属性——它的值不会被提交，和普通submit不同 - 如果表单有多个
type="image"，只有被点击的那个才触发坐标提交
用 <button type="submit"></button> 包裹 <img> 更可控
这种方式更灵活，适合需要自定义样式、添加文字、或避免坐标提交干扰的场景。浏览器把它当标准提交按钮处理，点击后只提交表单字段，不附带坐标。
注意 <button></button> 的默认类型就是 submit，但显式写出来更安全，尤其在旧版 IE 中。
-
<button type="submit"><img src="send.svg" alt="提交"></button>是合法且语义清晰的写法 - 务必给
<img>加alt属性，否则无障碍阅读器无法识别功能 - 若图片加载失败，
alt文字会显示出来，所以内容要准确（比如不要写 "icon"，而写 "提交表单"） - 某些老版本 Safari 对
<button></button>内部图片的垂直对齐有偏差，加vertical-align: middle可修复
为什么不用 <a></a> + JS 模拟提交？
常见误区是用链接加 onclick="document.forms[0].submit()" 实现“图片按钮”，这看似简单，但带来几个实际问题：
- 按回车键无法触发——
<a></a>默认不响应键盘提交，需额外监听keydown - 右键另存为会下载图片而非提交，用户预期错位
- 禁用 JS 时完全失效，不符合渐进增强原则
- 屏幕阅读器可能读作“链接”而非“按钮”，影响可访问性
- 表单验证（如
required字段）通常不自动触发，需手动调用checkValidity()
后端接收时要注意坐标字段是否干扰业务逻辑
如果用了 type="image"，后端框架（如 Django、Express、Spring）默认会把 xxx.x 和 xxx.y 当作普通 POST 字段接收。多数情况下你并不需要这些坐标值，但它们确实存在。
- Django 中可通过
request.POST.pop('submit_btn.x', None)主动丢弃（避免后续序列化报错） - Express +
body-parser会原样保留，若用req.body解构赋值，需排除这两个字段 - PHP 中
$_POST里会出现submit_btn_x和submit_btn_y（下划线替代点号） - 若表单同时有其他同名字段（如
<input name="submit_btn">），坐标字段可能覆盖原始值，建议命名区分开
真正需要热区判断（比如地图类交互）才值得保留坐标；普通提交按钮场景，优先选 <button></button> 方式更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
