如何将input标签参数传入HTML表单onsubmit属性绑定函数

你原有写法的问题：直接在onsubmit里写userID/username/email只能拿到对应id的DOM元素对象，无法直接获取输入值，且依赖浏览器非标准的id全局映射规则，不推荐使用。

方案1：纯HTML内联实现（无需额外JS选择器代码） #

直接利用表单事件内this指向当前表单实例的特性，通过表单原生自带的elements集合按name属性直接取输入值，不需要单独调用getElementById/querySelector创建变量，同时记得阻止表单默认提交的刷新行为。
修改后的HTML代码如下：

<form id="form" onsubmit="event.preventDefault(); addUserCredentials(this.elements.userID.value, this.elements.username.value, this.elements.email.value)">
  <label for="userID">User ID</label>
  <input type="text" id="userID" name="userID">
  
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  
  <label for="email">Email Address</label>
  <input type="text" id="email" name="email">

  <button type="submit">Submit</button>
</form>

注意：我顺手把label放到了input前面，同时给button加了type="submit"属性，避免部分浏览器下按钮行为异常；input是自闭合标签不需要写</input>闭合。

这个方案完全不需要修改你原有的addUserCredentials函数，原有Firebase相关逻辑可以直接复用。

方案2：低耦合JS实现（HTML更干净） #

如果不想在HTML属性里写过长的逻辑，可以去掉HTML上的onsubmit内联绑定，用FormDataAPI一次性读取表单所有字段值，同样不需要逐个查询DOM元素。
第一步，修改HTML去掉内联事件：

<form id="form">
  <label for="userID">User ID</label>
  <input type="text" id="userID" name="userID">
  
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  
  <label for="email">Email Address</label>
  <input type="text" id="email" name="email">

  <button type="submit">Submit</button>
</form>

第二步，在JS里加事件绑定：

const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
  // 阻止默认刷新行为
  e.preventDefault();
  // 基于当前表单创建FormData实例，一次性读取所有带name属性的字段值
  const formData = new FormData(this);
  // 直接按name取值传入原有函数，不需要逐个查DOM
  addUserCredentials(
    formData.get('userID'),
    formData.get('username'),
    formData.get('email')
  );
})

// 你原有的Firebase逻辑不需要做任何修改
function addUserCredentials(userId, username, email) {
  db.ref('users/' + userId).set({
    username: username,
    email: email
  });
}

如果后续要加新的输入字段，只需要给input加对应name属性，在formData.get里加对应取值逻辑就行，维护成本更低。

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