logo标签列表

在HTML表单中使用多个提交按钮

htmlformsform-submitsubmit-button
290

假设您在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来实现此功能？

只需使用 float: left。 - B''H Bi'ezras -- Boruch Hashem
27个回答
152

我只是运用了将按钮 float 到右侧的技巧。

这样，Prev 按钮就在 Next 按钮的左边，但是在 HTML 结构中，Next 实际上排在第一位。

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

30
请不要只改变这个按钮的顺序，还需调整标签页的顺序，以便按下 Tab 键时可以按照屏幕上的顺序循环浏览按钮。 - Steve
2
遗憾的是，这仅适用于按钮相对靠近的情况。在更复杂的情况下，比如一个大页面上有几个按钮分散在每个角落，但都在同一个表单中，这就变得难以管理了。 - Tylla
67

将上一个按钮类型更改为如下的按钮：

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

现在下一步按钮将成为默认选项，您还可以向其添加default属性，以便您的浏览器会像这样突出显示它：

<input type="submit" name="next" value="Next Page" default />
47
你所说的“default”属性是什么？并不存在“default”属性，下面这个链接证实了这一点：http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-input-element （HTML5、HTML 4.01 Transitional/Strict、XHTML 1.0 Strict都没有该属性）。同时我也不明白为什么把输入类型从submit改成button会更好。你可以在一个表单中拥有多个submit类型的输入元素而没有任何问题。我真的不明白为什么这个回答会获得那么多赞。 - Sk8erPeter
3
使用"type=button"的输入框不会执行表单操作。您可以添加"onclick"或其他类似函数，从而执行不同于按下“submit”类型按钮时执行的默认表单操作。这就是我所需要的，也是我投赞成票的原因。不能代表“default”属性，因为它不是我的问题的一部分;) 尽管如此，感谢您的澄清。 - Jonas
2
@Sk8erPeter，@Jonas .... 嗯...我怀疑这个default属性是一个全局属性；枚举属性..与枚举状态相关：http://www.w3.org/html/wg/drafts/html/master/single-page.html#keywords-and-enumerated-attributes。除此之外..这个答案的按钮方面不是一个答案..它是一个 '有条件的建议' 或者一个查询 (问题本身)。 - Brett Caswell
1
算了，我刚才意识到他在这个答案中提供了一个解决方法，将第一个输入转换为按钮，这样当按下回车键时，第二个输入会引发它的点击事件...不过..仍然有条件。 - Brett Caswell
3
@Jonas：是的，type="button"不会提交表单，而type="submit"会提交表单。但更改这些按钮的类型绝对不是解决方案，因为这些按钮基本上应该具有相同的行为方式。OP的问题是如何使“下一步”按钮成为按Enter键的默认按钮，而已被接受的答案中有一个可能的解决方案。 - Sk8erPeter
5
更改这些按钮类型是一个不好的解决方法（请参考我的先前评论）。在HTML中，input标签没有有效的default属性（如我之前所述），因此（流行的）浏览器不会突出显示具有此属性的按钮，这意味着没有非标准实现此属性，所以我仍然不知道@Wally Lawless在谈论什么，以及为什么这个答案如此被高估。在HTML5中只有一个有效的default属性，但仅适用于<track>标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track - Sk8erPeter
62

给你的提交按钮添加相同的名称，如下所示:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

当用户按下回车并且请求发送到服务器时，您可以检查服务器端代码中的submitButton的值，该值包含表单名称/值对的集合。例如，在ASP Classic中：

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

参考资料: 在单个表单上使用多个提交按钮

30
这不是用户所问的。用户想知道如何控制在按下回车键时哪个提交按钮会被激活，即默认按钮是哪一个。 - kosoant
21
在一个国际化应用程序中，如果你甚至不知道按钮的标签，那么它就无法工作。 - Chris
在哪种系统或技术解决方案中，服务器本身不知道下一个和返回按钮所使用的标签？难道不是服务器首先生成下一个和返回按钮吗？（如果本地化在客户端处理，我想服务器可能不知道，但我从未听说过HTML这样做） - Jay
3
这个答案完全没回答问题，可能是针对另一个问题的。为什么会有这么多赞？？？ 更不用说永远不应该检查按钮标签... 这会引起很多麻烦。即使是简单情况："我们应该将字符串缩写为“上一页”"也会破坏您网站的功能。 - Tylla
32

如果第一个按钮默认使用在不同浏览器上都是一致的话，那么请在源代码中正确安排它们的顺序，然后使用CSS来切换它们的位置。

例如，可以使用float将它们左右对齐以在视觉上进行切换.

23
有时提供的palotasb的解决方案是不够的。有些情况下，例如在"筛选"提交按钮放置在"下一个和上一个"按钮之上的情况下，我找到了一个解决方法：复制需要充当默认提交按钮的提交按钮，并将其放置在表单内任何其他提交按钮之上的隐藏div中。
从技术上讲，当按Enter键时，它将由不同的按钮提交，而不是点击可见的下一个按钮时。但由于名称和值相同，结果没有区别。 

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

19

这个技巧不能使用纯HTML完成，你需要依靠JavaScript来实现。

但是，如果你在HTML页面上放置两个表单，就可以实现这个技巧。

Form1将具有“前一页”按钮。

Form2将包含任何用户输入和“下一页”按钮。

当用户在Form2中按下Enter键时，将触发“下一页”提交按钮。

18

我会使用JavaScript提交表单。该函数将由表单元素的OnKeyPress事件触发，并检测是否选择了Enter键。如果是这种情况，它将提交表单。

以下是两个页面，介绍如何实现此操作：1，2。基于这些内容，以下是一个使用示例（基于此处）：

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
3
如果禁用了 JavaScript，会发生什么？ - Jon Winstanley
3
不应该使用<!--和-->来注释JavaScript代码，这些标记不是JavaScript语言标记。 - Marecky
3
@Marecky 他们不是要注释掉JS。在支持<script>的浏览器中解析<script>内容时，它们会被忽略。今天这些不再是必需的。但在非常古老的浏览器中，这是一种兼容性技巧，以避免脚本以纯文本形式打印出来。 - leemes
18

如果你只是希望它像安装对话框一样工作，只需在页面加载时将焦点放在“下一步”按钮上。

这样，如果用户按下回车键，表单就会提交并继续向前。如果他们想要返回，可以按Tab键或点击按钮。

3
他们的意思是指有人在文本字段中填写表格并按回车键。 - Jordan Reiter
17

你可以使用CSS来实现。

首先在标记中放置按钮，按照顺序先放下一步按钮，然后添加上一步按钮。

然后使用CSS将它们定位，使其以您想要的方式显示。

喜欢palotasb的回答吗？ - Peter Mortensen
15

大多数浏览器都可以在没有JavaScript或CSS的情况下正常工作：

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox，Opera，Safari和Google Chrome都可以正常工作。
一如既往，Internet Explorer会出问题。

JavaScript打开时，此版本可用：

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

所以这个解决方案的缺陷是：

如果您在Internet Explorer上关闭了JavaScript，则“上一页”功能将无效。

请注意，浏览器的“后退”按钮仍然可用！

1
如果没有JavaScript，您将无法激活“上一页”按钮，因为type="button"！ - riskop
1
你的建议存在问题，因为一个 type="button" 的按钮不会提交表单，所以它基本上什么也不做，而使用锚点的第二个版本将创建一个 GET 而不是 POST。 - Tylla
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接