ChatGPT解决这个技术问题 Extra ChatGPT

不提交表单的 HTML 按钮

我有一个表格。在那个表格之外,我有一个按钮。一个简单的按钮,如下所示:

<button>My Button</button>

不过,当我单击它时,它会提交表单。这是代码:

<form id="myform">
    <label>Label 
      <input />
    </label>
</form>
<button>My Button</button>

这个按钮应该做的只是一些 JavaScript。但即使它看起来就像上面的代码一样,它也会提交表单。当我将标签按钮更改为跨度时,它可以完美运行。但不幸的是,它必须是一个按钮。有没有办法阻止该按钮提交表单?像例如

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

j
jpp

我认为这是 HTML 最烦人的小特性……该按钮必须是“按钮”类型才能不提交。

<button type="button">My Button</button>

2019 年 2 月 5 日更新:根据 HTML Living Standard(以及 HTML 5 specification):

缺失值默认值和无效值默认值是提交按钮状态。


@Powerslave 有任何理由不to use <button>
@SandipPingle 没有理由使用它,除非您需要一些非常复杂的样式。此外,IE6 和 IE7(幸运的是已被淘汰)在某些情况下会错误地处理 <button>。此外,<button> 不是 100% 跨浏览器兼容的,因为在表单中使用时,不同的浏览器可能会为相同的 <button> 提交不同的值。
这是一个很好的答案,但它不是一个特殊性<button> 标记中 type 属性的默认值为 submit。当更改为 type=button 时,<button> 没有默认行为。请参阅此处的 type 属性:developer.mozilla.org/en-US/docs/Web/HTML/Element/button
T
ThiefMaster

return false; 在 onclick 处理程序的末尾将完成这项工作。但是,最好将 type="button" 添加到 <button> - 这样即使没有任何 JavaScript,它也能正常运行。


无论如何,不提交表单的按钮仅在启用 JavaScript 时才有用……我同意 type="button" 更干净。
return false; 并非在所有情况下都有效,而 type="Button" 则有效。即使启用了 JavaScript。
G
GJZ

默认情况下,html 按钮提交表单。

这是因为即使位于表单之外的按钮也充当提交者(请参阅 W3Schools 网站:http://www.w3schools.com/tags/att_button_form.asp)

也就是说,按钮类型默认为“提交”

<button type="submit">Button Text</button>

因此,解决此问题的一种简单方法是使用按钮类型。

<button type="button">Button Text</button>

其他选项包括在 onclick 结束时返回 false 或单击按钮时的任何其他处理程序,或者使用 标记代替

要了解更多信息,请查看 Mozilla 开发者网络关于按钮的信息:https://developer.mozilla.org/en/docs/Web/HTML/Element/button


G
Gert Grenander

戴夫马克尔是正确的。从 W3School's website

始终指定按钮的类型属性。 Internet Explorer 的默认类型是“按钮”,而在其他浏览器(以及 W3C 规范中)它是“提交”。

换句话说,您使用的浏览器遵循 W3C 的规范。


k
kk64738

另一个对我有用的选项是添加 onsubmit="return false;"到表单标签。

<form onsubmit="return false;">

语义上可能不如上述更改按钮类型的方法那么好的解决方案,但如果您只想要一个不会提交的表单元素,这似乎是一种选择。


R
RevanthKrishnaKumar V.

建议不要使用 <Button> 标记。请改用 <Input type='Button' onclick='return false;'> 标记。 (使用“return false”确实不应该发送表单。)

一些reference material


使用 <input type="button" /> 就足够了,使用 return false; 就足够了 - 无需同时使用两者。
我不同意建议不要使用按钮标签。如果您不使用它,您将失去一些可通过按钮标签自动获得的辅助功能。我想说按钮标签实际上推荐用于充当按钮的元素。
根据您链接的参考材料中的注释:“虽然 类型的 button 元素仍然是完全有效的 HTML,但较新的
m
motss

出于可访问性的原因,我无法使用多个 type=submit 按钮来完成它。使用具有多个按钮但可以在点击 Enter 键时提交表单的 form 本地工作的唯一方法是确保其中只有一个是 type=submit 而其他属于其他类型,例如 type=button。通过这种方式,您可以从键盘支持方面在浏览器上处理表单时获得更好的用户体验。


C
Charles Owen

在游戏后期,但您不需要任何 JavaScript 代码即可将按钮用作按钮。默认行为是提交表单,大多数人没有意识到这一点。 type参数有三个选项:submit(默认)、button和reset。很酷的一点是,如果您添加一个事件处理程序,它将绕过提交表单。

<button type="button">My Button</button>