要求「点这段文字就提交表单」时，常见做法给 div 挂 click 事件再手动 submit()。走原生关联可以省掉脚本，还顺便保住校验提示与键盘操作。
三种写法的差别
| 写法 | 是否需要 JS | 原生校验提示 | 键盘可达 |
|---|---|---|---|
| label for 指向按钮 id | 不需要 | 保留 | 保留 |
| label 包裹提交控件 | 不需要 | 保留 | 保留 |
| div 加 click 再 submit() | 需要 | 依赖手动调用 | 需补 tabindex 与按键处理 |
推荐写法
<form action="/order" method="post">
<input name="keyword" required>
<button type="submit" id="btn-submit">提交订单</button>
<label for="btn-submit" class="link-like">没有账号，直接提交</label>
</form>
label 的 for 指向 button 的 id，点击文字等价于点击按钮。文字样式交给 CSS 类名，不需要占位按钮或隐藏控件。
直接用 label 包裹也可以
<label>
<input type="submit" value="提交订单">
没有账号，直接提交
</label>
包裹写法少一组 id 关联，文字与控件互为整体。需要把按钮与文字分处两行布局时，改回 for 关联更自由。
四个要点
- button 必须写 type=”submit”。缺省 type 的 button 在不同表单里会被当成 submit，行为随上下文漂移。
- 保留原生校验。
required未通过时浏览器会给出提示并阻止提交，绕过 submit 走的 JS 逻辑要自行补这套提示。 - 一个 label 只关联一个控件。嵌套多个可关联元素会让点击目标不明确。
- 不要在 label 里再放链接或按钮。内层交互元素会抢走点击事件。
什么时候才需要 JS
需要在提交前做异步校验、二次确认或埋点上报时，才引入脚本，写法是监听 form 的 submit 事件并在 event.preventDefault() 后自行处理，仍然不要给普通元素挂 click 来模拟提交。