HTML 表单中的多个提交按钮

Question

假设您在 HTML 表单中创建了一个向导。一键后退，一键前进。由于按 Enter 时 后退 按钮首先出现在标记中，因此它将使用该按钮提交表单。

例子：

 <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 来执行此操作吗？

原文由 Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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" 。

原文由 palotasb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

把之前的按钮类型改成这样的按钮：

 <input type="button" name="prev" value="Previous Page" />

现在 Next 按钮将是默认按钮，另外您还可以向它添加 default 属性，这样您的浏览器就会像这样突出显示它：

 <input type="submit" name="next" value="Next Page" default />

原文由 Wally Lawless 发布，翻译遵循 CC BY-SA 4.0 许可协议