点击后自动提交表单是规范行为，本质为带坐标（x/y）的提交控件，需置于内、有src和alt，提交字段名为name.x/name.y。
为什么 <input type="image"> 点击后会自动提交表单
因为浏览器把 <input type="image"> 当作提交按钮处理，只要没加 formnovalidate 或阻止默认行为，点击就会触发表单提交。这不是 bug，是规范行为 —— 它本质是带坐标的提交控件，点击位置会以 x 和 y 参数形式附加到提交数据里（比如 submit.x=123&submit.y=45）。
- 必须放在
<form></form>内才有效；单独写不会渲染为可点击图片 -
src属性必需，否则显示空白或破损图标 - 不支持
value属性，但可以用name控制提交字段名（如name="search_submit"，则提交参数为search_submit.x和search_submit.y） - 无法用 CSS 的
background-image替代src—— 它只认内联图片资源
<input type="image"> 的替代方案：什么时候不该用它
如果你只是想要一个带图、可点击、又不想提交表单的“按钮”，<input type="image"> 就不合适。常见误用场景包括：导航跳转、模态框触发、AJAX 按钮、单页应用内的交互控件。
- 想阻止提交？可以加
onclick="event.preventDefault();"，但语义混乱，不如换标签 - 需要 hover / active 状态样式？
<input>的伪类支持弱且跨浏览器不一致，<button></button>+<img>或背景图更可控 - 要适配暗色模式或响应式缩放？
src是静态路径，无法像 CSS 背景那样用prefers-color-scheme或srcset切换 - 无障碍访问差：屏幕阅读器通常只读
alt，但无法识别其操作意图（是“提交”还是“搜索”？），而<button></button>可明确设aria-label
正确设置 <input type="image"> 的最小必要代码
仅当你要保留原生表单提交、且需获取点击坐标时才用它。以下是安全可用的写法：
-
alt必须写，且描述动作（不是“照片图标”而是“上传照片”），这是关键可访问性保障 - 显式声明
width和height，避免布局偏移（尤其是图片加载慢时） - 不要依赖
style="width:100%"拉伸图片 —— 坐标值仍按原始尺寸计算，会导致x/y值错乱 - 服务端接收时，检查字段是否存在（例如 PHP 中
isset($_POST['photo_submit.x'])），而不是只查$_POST['photo_submit']（它永远不存在）
服务端如何解析 image 提交的坐标值
提交后，浏览器不会发一个叫 photo_submit 的字段，而是发两个：photo_submit.x 和 photo_submit.y。注意中间的点，在大多数后端框架中会被转义或扁平化。
- PHP：直接用
$_POST['photo_submit_x']（下划线替代点）或$_POST['photo_submit']['x']（如果启用了variables_order中的GPC且配置了register_globals风格，但已废弃） - Node.js（Express +
body-parser）：req.body['photo_submit.x']可直接访问，但需确保extended: true - Python Flask：
request.form.get('photo_submit.x')可用，但推荐用request.form.get('photo_submit.x', type=int, default=0)防类型错误 - 注意：某些 CDN 或 WAF 会过滤含点的字段名，导致坐标丢失 —— 测试时务必抓包确认实际 POST 数据
