如何让div容器外的submit input触发容器内form的提交？

有两种简单可行的方法实现这个需求，下面分别说明：

方法一：使用HTML5的form属性（无需JavaScript） #

给表单设置一个唯一ID，然后让外部的提交按钮通过form属性关联这个表单ID，浏览器会自动识别并触发表单提交，这是最简洁的实现方式。

修改后的完整代码如下：

CSS代码（无需改动） #

.container {
  margin: auto;
  width: 20%;
  padding: 10px;
  border: 1px solid #E1291B;
  display: grid;
  background-color: bisque;
}

.form-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10%;
}

HTML代码（调整表单ID和按钮位置） #

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <!-- 给表单添加唯一ID -->
  <form class="form-login" id="loginForm" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email">
    <label for="pass">Mot de passe</label>
    <input type="password" name="pass" id="pass">
    <!-- 移除原表单内的submit按钮 -->
  </form>
</div>
<!-- 外部提交按钮，通过form属性关联目标表单ID -->
<input type="submit" value="Login" form="loginForm">

方法二：使用JavaScript触发提交（兼容旧浏览器） #

如果需要兼容不支持HTML5 form属性的旧浏览器，可以通过JavaScript监听按钮点击事件，手动调用表单的submit()方法。

内联JS写法（快速实现） #

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" id="loginForm" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email">
    <label for="pass">Mot de passe</label>
    <input type="password" name="pass" id="pass">
  </form>
</div>
<!-- 外部按钮绑定点击事件 -->
<button onclick="document.getElementById('loginForm').submit()">Login</button>

规范事件绑定写法（避免内联JS） #

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" id="loginForm" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email">
    <label for="pass">Mot de passe</label>
    <input type="password" name="pass" id="pass">
  </form>
</div>
<button id="submitBtn">Login</button>

<script>
document.getElementById('submitBtn').addEventListener('click', function() {
  document.getElementById('loginForm').submit();
});
</script>

内容的提问来源于stack exchange，提问作者Wlid El Bahdja