如何通过点击表单外的<label>提交表单？现有提交逻辑改造

方法一：纯HTML关联（利用原生特性） #

你已经用到了<label>的for属性关联表单内的提交按钮，只需要稍作优化就能正常工作——把原有的提交按钮隐藏，用户看到的就是外部的<label>按钮，点击它会触发隐藏的提交按钮，进而提交表单。

修改后的代码如下：

<div class="join">
  <p>Join</p>
  <span>Join to access all features of the site!</span>
</div>
<form action="join/joinf" method="POST" class="joinform">
  <div class="left">
    <p>ID<span class="required"> *required</span></p>
    <p>PW<span class="required"> *required</span></p>
  </div>
  <div class="right">
    <p><input type="text" name="id" id="id" required></p>
    <p><input type="password" name="pw" required></p>
  </div>
  <!-- 隐藏原提交按钮，不影响功能 -->
  <input type="submit" id="formsub" value="join" style="display: none;">
</form>
<!-- 点击这个label会触发id为formsub的提交按钮 -->
<label for="formsub"><button>join-label</button></label>

原理：<label>的for属性会关联对应id的表单控件，点击<label>等同于点击关联的控件，所以这里点击外部的<label>就会触发隐藏的<input type="submit">，自然会提交表单，同时还能保留HTML5的表单验证（比如required属性的校验）。

方法二：JavaScript主动提交表单 #

如果你不想依赖隐藏的提交按钮，可以直接用JS监听<label>的点击事件，主动调用表单的submit()方法，这种方式更灵活。

修改后的代码如下：

<div class="join">
  <p>Join</p>
  <span>Join to access all features of the site!</span>
</div>
<!-- 给表单添加id，方便JS获取 -->
<form action="join/joinf" method="POST" class="joinform" id="joinForm">
  <div class="left">
    <p>ID<span class="required"> *required</span></p>
    <p>PW<span class="required"> *required</span></p>
  </div>
  <div class="right">
    <p><input type="text" name="id" id="id" required></p>
    <p><input type="password" name="pw" required></p>
  </div>
  <!-- 可以移除原提交按钮，也可以保留 -->
  <!-- <input type="submit" id="formsub" value="join"> -->
</form>
<!-- 给label添加点击事件 -->
<label id="submitLabel"><button>join-label</button></label>

<script>
// 获取表单和label元素
const joinForm = document.getElementById('joinForm');
const submitLabel = document.getElementById('submitLabel');

// 监听label的点击事件
submitLabel.addEventListener('click', function(e) {
  // 阻止button的默认行为（避免页面跳转干扰）
  e.preventDefault();
  // 调用表单的submit方法，会触发HTML5表单验证
  joinForm.submit();
});
</script>

注意：调用form.submit()同样会触发HTML5的表单验证规则（比如required），和点击原生提交按钮的效果一致。如果不需要验证，可以在提交前添加joinForm.noValidate = true;。

内容的提问来源于stack exchange，提问作者JustSingleUser