input type="image" 是带坐标提交的专用控件，非单纯美化submit按钮；需设name属性才能提交name.x/name.y，src须路径正确且Content-Type为image/*，误用会导致后端字段冗余或解析异常。
input type="image" 不是用来“换掉 submit 按钮样式”的，它是带坐标提交的专用控件；误用会导致后端多出 submit.x 和 submit.y 这类未定义字段，还可能干扰表单解析。
为什么图片不显示或点击无效
根本原因是路径错误或服务器未正确返回图片资源。浏览器把 input type="image" 当作 <img> 加载，所以它严格遵循图片加载规则：
- 确保
src是相对路径（如./assets/submit-btn.png）或绝对 URL（如https://example.com/btn.jpg），不要用file://协议本地双击打开 - 检查开发者工具 Network 面板，确认图片请求状态码是 200，且 Response Headers 中
Content-Type是image/* - 避免在
src中写错大小写或扩展名（比如服务器实际是submit-btn.PNG，但代码写成.png，某些 Linux 服务器会 404） - 必须设置
name属性，否则按钮能渲染但点击不提交任何字段（包括坐标）
后端收不到 x/y 参数的常见原因
最常见的是没设 name 属性——浏览器只在有 name 时才提交 name.x 和 name.y：
-
<input type="image" src="go.png">完全不会发坐标 -
<input type="image" name="search" src="go.png">才会发search.x=123&search.y=45 - 服务端需按
name.x/name.y取值（例如 PHP 中是$_POST['search.x']，不是$_POST['search_x']） - 坐标是字符串，需手动
parseInt()或安全转换，并校验范围（如0 <= x <= 图片原始宽度）
要不要用 input type="image"？先问自己是否真需要坐标
绝大多数“想用图当按钮”的场景，其实该用 <button type="submit"><img src="" alt="提交"></button> 或 CSS 背景图方案：
立即学习“前端免费学习笔记（深入）”；
-
input type="image"不支持disabled的可靠视觉反馈（部分浏览器灰掉但依然响应点击） - 不支持
aria-属性，对屏幕阅读器不友好；alt必须非空，否则无障碍体验断裂 - 若用了
width/height缩放图片，服务端需按原始尺寸做比例换算，否则坐标失准 - 真正需要它的场景极少：老系统图像地图、或必须依赖浏览器原生坐标上报的分析埋点
坐标原点始终是图片左上角，和 CSS 缩放、object-fit 无关；但只要 input 渲染尺寸变了，坐标就不可信——这点最容易被忽略。
