<input type="image"> 必须设置 name 属性才能提交 name.x 和 name.y 坐标字段；无 name 则不发送坐标，且坐标原点在图片左上角，缩放时需服务端换算，移动端建议改用 <button type="submit"><img></button>。
直接用 <input type="image"> 是能实现图片提交按钮，但它不是“换皮肤”的快捷方式——它是带坐标上报的专用控件；不设 name 就收不到 x/y，后端字段名是 name.x 和 name.y（带英文点），不是下划线或大写。
为什么后端收不到 submit.x 和 submit.y？
最常见原因是没写 name 属性。浏览器只在 <input type="image"> 有 name 时才发坐标字段。
-
<input type="image" src="go.png">→ 完全不提交任何字段 -
<input type="image" name="search" src="go.png">→ 提交search.x=123&search.y=45 - src 404 不影响坐标发送，但用户看到破损图标，易误点失效
- alt 缺失会导致屏幕阅读器跳过该控件，且图片加载失败时无任何提示
坐标值怎么解析？注意这些细节
坐标是整数像素值，原点始终在图片左上角；但不同浏览器处理缩放和小数的方式不一致。
- 用
width/height缩放图片时，坐标仍按原始图尺寸计算，服务端需做比例换算 - Safari 在页面缩放（如 125%）下可能返回小数坐标（如
search.x=12.3），不能直接转int - IE 强制截断为整数，但部分旧框架（如 ASP.NET WebForms）对含点的字段名解析异常
- PHP 中用
$_POST['search.x']可直接取值；Flask 用request.form.get('search.x')
移动端点击区域太小怎么办？
<input type="image"> 的热区严格等于图片渲染尺寸，CSS transform: scale() 放大图像但不扩大热区，无效。
立即学习“前端免费学习笔记（深入）”；
- 直接用更大源图，再用
width/height等比缩放显示 - 包裹
<label style="padding: 12px"><input type="image"></label>扩展可点击区域 - 更推荐方案：改用
<button type="submit"><img src="..." alt="..."></button>，然后对button设padding和min-width - 切勿只靠
cursor: pointer暗示可点击——它不改变实际热区大小
什么时候该换掉 input type="image"？
绝大多数“想用图当按钮”的场景，都不需要坐标信息，继续用它只是给后端添麻烦。
- 若只需提交动作，不用坐标：
<button type="submit"><img src="submit.png" alt="提交"></button>更干净 - 需要 disabled、焦点管理、hover 动画、SVG 或响应式缩放时，
button+ CSS 背景图或img是唯一靠谱选择 - 真正依赖原生坐标的行为极少：比如老系统图像地图（
<map>）、或埋点要求精确点击位置分析 - value 属性虽会提交，但不显示在图片上；想控制文字必须用 CSS 或换方案
坐标的语义是“点击位置”，不是“按钮标识”；如果你只关心“用户点了哪个图”，那 name 本身已足够，x/y 是冗余字段——别让它悄悄混进你的表单解析逻辑里。
