本文介绍了HTML 表单中的多个提交按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

示例:

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

解决方案

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

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

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

与其他建议相比的优点:没有 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 , 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 . That way, when you press 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 表单中的多个提交按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 04:28
查看更多