点击时自动提交表单并附加name.x/name.y坐标参数是浏览器原生行为；必须设置name属性才能发送坐标，src需有效且alt应描述功能，现代开发更推荐button+img方案。

为什么 input type="image 提交时会多出 x/y 坐标参数

点击图片按钮后，表单不是只提交 name，而是自动附加 name.x 和 name.y 两个字段——这是浏览器原生行为，不是 bug。服务端收到的可能是 submit.x=123&submit.y=45，而非单纯的 submit=clicked。

• 必须给 input 设置 name 属性，否则坐标不会被发送
• 坐标值是鼠标点击位置相对于图片左上角的像素值（整数），非百分比
• 若图片未加载完成就点击，部分浏览器（如旧版 Safari）可能发 0,0 或直接不发坐标
• 服务端需适配：检查是否存在 xxx.x 字段来判断该按钮是否被触发，而不是查 xxx

input type="image 的 src 和 alt 必须写全

缺 src 会导致渲染为默认提交按钮（文字型），完全失去图形化意义；缺 alt 不仅影响可访问性，在图片加载失败时用户看不到任何提示，且部分屏幕阅读器会跳过该控件。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• src 必须是有效路径或 URL，相对路径以 HTML 文件所在目录为基准
• alt 应描述按钮功能，例如 alt="搜索"，而非“搜索按钮图片”
• 不支持 CSS background-image 替代 src——input type="image 只认 src

替代方案：用 button + img 更可控

当需要响应点击事件、动态切换图片、或避免坐标干扰时，button 嵌套 img 是更稳妥的选择，且语义更清晰。

<button type="submit" name="action" value="search">
  @@##@@
</button>

• 提交时只发送 action=search，无额外坐标字段
• 可绑定 onclick、添加 disabled、用 CSS 控制 hover/focus 样式
• 注意：IE8 及更早版本中，button 的 value 不会被提交，需靠 JS 补充或改用隐藏域
• 若需保持原生表单提交逻辑，确保 button 在 form 内且 type="submit"

移动端点击区域太小怎么办

input type="image 的点击热区严格等于图片尺寸，小图在手机上极易点空。CSS 缩放（transform: scale()）会放大图像但不扩大热区，无效。

• 直接使用更大尺寸源图，再用 width/height 属性等比缩放显示
• 包裹一层 label 并设足够内边距：<label style="padding: 12px"><input type="image" ...></label>
• 更推荐方案：改用 button + img，然后对 button 设置 padding 和 min-width
• 切勿依赖 cursor: pointer 来暗示可点击——它不扩大实际热区

实际项目里，除非明确需要坐标信息（比如图像地图式操作），否则优先用 button 包裹 img。坐标机制看着巧妙，但服务端解析成本、移动端适配、无障碍支持都容易漏掉细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！