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

问题描述

假设你在HTML表单中创建一个向导。一个按钮返回，一个按钮向前。由于 back 按钮在按下Enter时会首先出现在标记中，因此将使用该按钮来提交表单。

示例：

 <形式> <！ - 将光标置于此字段并按下Enter  - > < input type =textname =field1/> <！ - 这是将要提交的按钮 - > < input type =submitname =prevvalue =Previous Page/> <！ - 但这是我想要提交的按钮 - > < input type =submitname =nextvalue =Next Page/>< / form>  

我想要做的是，当用户按Enter键时，可以决定使用哪个按钮提交表单。这样，当您按下Enter时，向导将移动到下一页，而不是前一页。你需要使用 tabindex 来做到这一点吗？

解决方案

这有助于。我只是在做 float 右边按钮的技巧。

这样Prev按钮就是在下一个按钮的左侧，但Next代码首先出现在HTML代码中：

.f {float：right;}。clr {clear：both;}

 < form action =actionmethod =get> < input type =textname =abc> < div id =buttons> < input type =submitclass =fname =nextvalue =Next> < input type =submitclass =fname =prevvalue =Prev> < div class =clr>< / div><！ - 此div可防止稍后的元素随按钮一起浮动。让他们'在'div＃按钮内 - > < / div>< / form>  

b
$ b

编辑：比其他建议的好处：没有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>

What I would like to do, is 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 hope this helps. I'm just doing the trick of floating the buttons on the right.

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

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

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

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