input type="image"本质是提交控件，会额外提交x/y坐标，仅适用于图像地图等需坐标场景；美化按钮应优先用+背景图或svg，兼顾语义、无障碍与可控性。
input type="image" 本质是 submit，不是普通按钮
它不是用来“美化按钮”的替代方案，而是专门用于图像提交的表单控件——点击时会以鼠标坐标为 x 和 y 提交两个额外字段（如 submit.x=123&submit.y=45）。如果你只是想换掉默认 <button type="submit"></button> 的样式，用 input type="image" 反而多出无用参数，还可能干扰后端解析。
常见错误现象：input type="image" 点击后表单提交了，但后端收不到预期字段，或日志里频繁出现 xxx.x/xxx.y 这类未定义参数。
- 仅在需要获取点击坐标的场景才用（比如图像地图、热区提交）
- 必须带
src属性，否则不渲染；alt建议写清功能（如alt="登录"），否则无障碍体验差 - 不能通过
::before/::after伪元素添加内容（它是个替换元素，像<img>）
真正想自定义按钮样式？用 button + background-image 或 SVG
更可控、语义正确、无障碍友好。把图片当背景，保留 <button></button> 的原生行为和可访问性。
示例（纯 CSS 方案）：
<button type="submit" class="img-btn">登录</button>
<p>.img-btn {
background: url('login-btn.png') no-repeat center;
background-size: contain;
width: 120px;
height: 40px;
border: none;
outline: none;
cursor: pointer;
/<em> 隐藏文字，但保留给屏幕阅读器 </em>/
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
.img-btn:hover {
opacity: 0.9;
}</p>
- 若需响应式，优先用
background-size: cover或 SVG 替代 PNG - 不要用
display: none或visibility: hidden隐藏文字，会砍掉无障碍支持 - 务必加
type="submit"，否则在某些表单中不会触发表单提交
用 img + label 模拟？小心表单事件丢失
有人用 <img> 加 <label for="submit"></label> 组合，再配一个隐藏的 <input type="submit" id="submit">。这看似灵活，但容易踩坑：
- 点击
<img>不一定触发submit事件监听（事件发生在<label></label>上，而非表单控件） - 移动端 click 延迟可能导致响应卡顿，需手动加
touchstart或pointerdown - 若 label 的
for指向错误 ID 或控件被移除，整个提交就失效，且控制台不报错
除非有强交互需求（比如按钮状态要随图片变化），否则没必要绕这么远。
兼容性和性能注意点
input type="image" 在所有浏览器都支持，但它的坐标提交行为在现代前后端架构中基本没用；而用 button + 背景图的方式，IE9+ 都没问题。
- PNG 图片体积大？换成 inline SVG（
background: url("data:image/svg+xml,...")）减少请求 - 需要禁用状态？别只改 opacity，同时加
pointer-events: none和tabindex="-1" - 如果按钮要适配暗色模式，SVG 比 PNG 更容易用
currentColor动态着色
最常被忽略的是：button 的 focus 样式没重置，导致键盘用户 tab 到按钮时看到奇怪的浏览器默认外框，又不敢删 —— 其实只要保留清晰的视觉焦点即可，不必完全去除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
