问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HTML 表单上的默认提交按钮是如何确定的？

社区维基
1
新手上路，请多包涵

如果表单已提交但不是通过任何特定按钮提交，例如

  • 按 Enter
  • 在 JS 中使用 HTMLFormElement.submit()

浏览器应该如何确定多个提交按钮中的哪一个（如果有）用作按下的按钮？

这在两个层面上很重要：

  • 调用附加到提交按钮的 onclick 事件处理程序
  • 发送回网络服务器的数据

到目前为止，我的实验表明：

  • 按下 Enter 时，Firefox、Opera 和 Safari 使用表单中的第一个提交按钮
  • 按下 Enter 时，IE 使用第一个提交按钮或根本不使用，具体取决于我无法弄清楚的条件
  • 所有这些浏览器都不使用任何 JS 提交

标准是怎么说的？

如果有帮助，这是我的测试代码（PHP 仅与我的测试方法相关，与我的问题本身无关）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

原文由 Stewart 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcross-browserstandards
阅读 640
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您通过 JavaScript 提交表单（即 formElement.submit() 或任何等效项），则 没有 一个提交按钮被认为是成功的，并且它们的值都不包含在提交的数据中。 （请注意，如果您使用 submitElement.click() 提交表单，那么您引用的提交被认为是有效的；这并不真正属于您的问题范围，因为这里的提交按钮是明确的，但是我想我会为阅读第一部分并想知道如何通过 JavaScript 表单提交使提交按钮成功的人包括它。当然，表单的 onsubmit 处理程序仍然会以这种方式触发，而他们不会通过 form.submit() 所以这是另一壶鱼……）

如果表单是通过在非文本区域字段中按 Enter 提交的，那么实际上由用户代理来决定它想要什么。 规范 没有说明在文本输入字段中使用 Enter 键提交表单（如果您选择一个按钮并使用空格或其他方式激活它，那么没有问题，因为该特定提交按钮被明确使用）。它只是说激活提交按钮时必须提交表单。甚至不需要在例如文本输入中 按 Enter 来提交表单。

我相信 Internet Explorer 选择了源中最先出现的提交按钮；我有一种感觉，Firefox 和 Opera 选择具有最低 tabindex 的按钮，如果没有定义其他内容，则回退到第一个定义的按钮。关于提交是否具有非默认值属性 IIRC 也存在一些复杂性。

要带走的一点是，这里发生的事情没有定义的标准，这完全是浏览器的心血来潮 - 所以无论你在做什么，尽量避免依赖任何特定的行为。如果您真的必须知道，您可能会发现各种浏览器版本的行为，但是当我不久前对此进行调查时，有一些非常复杂的情况（当然会随着新的浏览器版本而改变），我会建议您尽可能避免！

原文由 Andrzej Doyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

HTML 4 没有明确说明。 HTML 5 指定第一个提交按钮必须是默认的：

4.10.21.2 隐式提交

A form 元素的 默认按钮 是 树形顺序 中的第一个 提交按钮，其 表单所有者 是 form 元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本控件获得 焦点 时按下“enter”键隐式提交表单），那么对于 默认按钮 具有 激活行为 的表单这样做并且未被 禁用，必须导致用户代理在该 默认按钮 处 触发 click 事件。

如果您想在保持视觉顺序的同时影响哪个是“第一个”，那么您可以采用几种方法。

一个屏幕外的、不可聚焦的按钮。

 .hidden-default {
    position: absolute;
    left: -9999px;
}

 <form>
  <input name="text">
  <button name="submit" value="wanted" class="hidden-default" tabindex="-1"></button>
  <button name="submit" value="not wanted">Not the default</button>
  <button name="submit" value="wanted">Looks like the default</button>
</form>

弹性盒顺序：

 .ordering {
    display: inline-flex;
}

.ordering button {
    order: 2;
}

.ordering button + button {
    order: 1;
}

 <form>
  <input name="text">
  <div class="ordering">
    <button name="submit" value="wanted">First in document order</button>
    <button name="submit" value="not wanted">Second in document order</button>
  </div>
</form>

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏