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此功能？

Answer 1

我希望这有帮助。我只是在float按右边的按钮。这样，Prev按钮位于按钮的左侧Next，但Next在HTML结构中排在第一位：.f {&nbsp; float: right;}.clr {&nbsp; clear: both;}<form action="action" method="get">&nbsp; <input type="text" name="abc">&nbsp; <div id="buttons">&nbsp; &nbsp; <input type="submit" class="f" name="next" value="Next">&nbsp; &nbsp; <input type="submit" class="f" name="prev" value="Prev">&nbsp; &nbsp; <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->&nbsp; </div></form>优于其他建议的好处：没有JavaScript代码，无法访问，并且两个按钮都保留type="submit"。

Answer 2

将以前的按钮类型更改为这样的按钮：<input type="button" name="prev" value="Previous Page" />现在，“ 下一步”按钮将成为默认按钮，此外，您还可以default向其中添加属性，以便浏览器将其突出显示，如下所示：<input type="submit" name="next" value="Next Page" default />

Answer 3

为您的提交按钮命名，如下所示：<input type="submit" name="submitButton" value="Previous Page" /><input type="submit" name="submitButton" value="Next Page" />当用户按下Enter并将请求发送到服务器时，您可以submitButton在服务器端代码中检查其中包含表单name/value对集合的值。例如，在ASP Classic中：If Request.Form("submitButton") = "Previous Page" Then&nbsp; &nbsp; ' Code for the previous pageElseIf Request.Form("submitButton") = "Next Page" Then&nbsp; &nbsp; ' Code for the next pageEnd If