带独立提交按钮的选项表单开发：单表单可行吗？有其他方案吗？

核心结论 #

不需要创建多个表单，完全可以在单个表单内完成，还能通过优化代码让逻辑更简洁易维护。

具体实现方案 #

1. 单个表单的基础实现 #

把所有输入控件放在同一个<form>标签内即可——你的按钮都是type="button"（不是默认的submit），不会触发表单提交，多个按钮在同一表单里不会互相干扰。修改后的HTML结构如下：

<form>
  <!-- Go to 输入组 -->
  <div class="input_fields">
    <label for="goto">Go to</label>
    <select id="goto">
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="gotoTask()">OK</button>
  </div>
  <!-- Wait for 输入组 -->
  <div class="input_fields">
    <label for="wait">Wait for</label>
    <select id="wait">
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="waitTask()">OK</button>
  </div>
  <!-- 任务显示区 -->
  <div class="task_window">
    Task: <span id="goto_message"></span> <span id="wait_message"></span>
    <button type="submit" onclick="pushTask(event)">OK</button>
  </div>
</form>

注意：底部的submit按钮点击会触发表单默认跳转，需要在pushTask函数里添加event.preventDefault()阻止默认行为。

2. 更简洁的优化方案 #

可以合并重复逻辑，不用写多个独立函数。通过给按钮绑定自定义属性，统一处理选择和显示逻辑：

function updateTask(el) {
  const selectId = el.dataset.target;
  const value = document.getElementById(selectId).value;
  const messageId = `${selectId}_message`;
  document.getElementById(messageId).textContent = value;
}

function pushTask(event) {
  event.preventDefault();
  // 收集任务数据，执行提交逻辑
  const gotoVal = document.getElementById("goto").value;
  const waitVal = document.getElementById("wait").value;
  console.log("提交任务：", gotoVal, waitVal);
}

对应的HTML按钮修改为：

<button type="button" data-target="goto" onclick="updateTask(this)">OK</button>
<button type="button" data-target="wait" onclick="updateTask(this)">OK</button>

这种方式扩展性更强，后续新增输入组时，无需额外编写函数，只需给按钮添加对应data-target属性即可。

3. 关于多表单的误区 #

用多个表单反而会增加不必要的复杂度：每个表单的提交逻辑需要单独处理，且不符合语义化最佳实践——这些输入属于同一个任务流程，理应放在单个表单内。

样式修复补充 #

你现有CSS中.task_window的样式漏写了分号，修正后如下：

.task_window {
    width: 50%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #17375e;
    border-radius: 15px;
    padding: 10px 15px;
}

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