HTML 表单中的多个提交按钮 [英] Multiple submit buttons in an HTML form

问题描述

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

示例:

<!-- 将光标置于该字段并按 Enter --><input type="text" name="field1"/><!-- 这是将提交的按钮--><input type="submit" name="prev" value="上一页"/><!-- 但这是我想要提交的按钮--><input type="submit" name="next" value="下一页"/>

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

解决方案

我只是把按钮浮动向右移动.

这样 Prev 按钮在 Next 按钮的左边，但 Next 在 HTML 结构中排在最前面:

.f {浮动:对；}.clr {清楚:两者；}

<input type="text" name="abc"><div id="按钮"><input type="submit" class="f" name="next" value="Next"><input type="submit" class="f" name="prev" value="Prev"><div class="clr"></div><!-- 这个 div 可以防止后面的元素随按钮浮动.将它们保持在内部"div#buttons -->

与其他建议相比的优点:没有 JavaScript 代码，可访问，并且两个按钮都保持 type=submit".

Let's say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the back button appears first in the markup when you press Enter, it will use that button to submit the form.

Example:

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

I would like to get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

解决方案

I'm just doing the trick of floating the buttons to the right.

This way the Prev button is left of the Next button, but the Next comes first in the HTML structure:

.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>

Benefits over other suggestions: no JavaScript code, accessible, and both buttons remain type="submit".

这篇关于HTML 表单中的多个提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！