html - HTML 表单中的多个提交按钮

Question

假设您在 HTML 表单中创建了一个向导。一键后退，一键前进。因为当你按下 Enter 时 back 按钮首先出现在标记中，所以它将使用该按钮来提交表单。

例子:

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

我想决定当用户按下 Enter 时使用哪个按钮来提交表单。这样，当您按下 Enter 时，向导将移至下一页，而不是上一页。您必须使用 tabindex 来执行此操作吗？

Answer 1

我只是在做 float 右侧按钮的技巧。

这样 Prev 按钮位于 Next 按钮的左侧，但 Next 在 HTML 结构中排在第一位:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

优于其他建议的好处:没有 JavaScript 代码，可访问，并且两个按钮都保持 type="submit"。