最省事但仅适用于需坐标数据的场景，它自动提交表单并发送name.x/name.y字段，name属性和可访问src为必填，缩放时坐标仍按原图尺寸计算；通用方案推荐包裹，语义清晰、无障碍友好、样式可控。
用 <input type="image"> 最省事，但只适合真要坐标数据的场景
它点击后自动提交表单，且会发 name.x 和 name.y 两个字段——这是它的核心行为，不是 bug。如果你后端根本不需要坐标，那它只是多塞了两个无用参数。
-
name属性必须写，否则坐标字段压根不提交（<input type="image" src="go.png">→ 后端收不到任何x/y） -
src必须可访问，404 时按钮显示破损图标，但点击仍会提交坐标（用户看不见热区，体验差） - 不能用 CSS
background-image替代src，它只认内联图片资源 - 缩放图片时（比如设了
width/height），坐标值仍按原始图尺寸计算，后端若直接当像素用会偏移
用 <button type="submit"></button> 包裹 <img> 是更通用的选择
绝大多数“换按钮外观”的需求，其实该走这条路。它不带坐标副作用，支持 disabled、aria-label、焦点管理，样式和交互也更可控。
- 必须显式写
type="submit"，否则在某些表单中不会触发表单提交 -
<img>的alt要有意义（如alt="搜索"），不能留空或写“图标” - 需重置默认样式：
border: none; background: none;，否则旧浏览器可能残留灰边 - 热区可用
padding扩大，比input[type="image"]的硬边界更友好
纯 CSS 背景图方案：适合不能改 HTML 结构的老项目
当你只能动 CSS、不能碰 HTML 标签时，可以覆盖 <input type="submit"> 的默认样式，用背景图替代文字。
- 把文字隐藏掉：
font-size: 0; text-indent: -9999px;（别用display: none，会破坏无障碍） - 背景图居中显示：
background: url('btn.png') no-repeat center; background-size: contain; - 必须设固定
width/height，否则按钮尺寸塌缩 - 响应式建议换 SVG 或用
background-size: cover+ 媒体查询，PNG 缩放易糊
后端收不到 name.x/name.y？先查这三处
不是浏览器问题，大概率是前端漏了关键配置。坐标字段名严格遵循 name.x 格式，中间是英文点，不是下划线或大写 X。
- 没设
name属性 → 浏览器根本不会生成这两个字段 -
src地址 404 或跨域 → 图片不显示，但坐标仍会提交（只是数值可能为 0 或异常） - 表单
method="get"且坐标值过大 → URL 超长被截断，部分字段丢失
input[type="image"] 的场景极少：图像地图热区、原生埋点坐标上报。其他时候，它只是个语义正确但容易误用的遗留接口——坐标逻辑、缩放失准、无障碍短板，都得额外兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
