首页 文章

HTML按钮不提交表单

提问于
浏览 次
301

我有一张表格 . 在那个表格之外，我有一个按钮 . 一个简单的按钮，如下所示：

<button>My Button</button>

然而，当我点击它时，它会提交表单 . 这是代码：

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

所有这个按钮应该是一些JavaScript . 但即使它看起来像上面的代码，它提交表单 . 当我将标签按钮更改为span时，它可以完美地工作 . 但不幸的是，它需要是一个按钮 . 有没有办法阻止该按钮提交表单？像e . G .

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

6 回答

  • 32

    我认为这是HTML中最令人烦恼的小特点...该按钮需要是“按钮”类型才能不提交 .

    <button type="button">My Button</button>
    回复于
  • 13

    onclick处理程序结束时 return false; 将完成这项工作 . 但是，最好简单地将 type="button" 添加到 <button> - 这样即使没有任何JavaScript它也能正常运行 .

    回复于
  • 751

    Dave Markle是对的 . 从W3School's website：

    始终指定按钮的type属性 . Internet Explorer的默认类型是“按钮”，而在其他浏览器（以及W3C规范）中，它是“提交” .

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

    回复于
  • 3

    默认情况下，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或单击按钮时的任何其他处理程序，或者使用<input>标签

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

    回复于
  • 10

    建议不要使用 <Button> 标签 . 请改用 <Input type='Button' onclick='return false;'> 标签 . （使用"return false"确实不应该发送表格 . ）

    一些reference material

    回复于
  • 0

    出于可访问性原因，我无法使用多个 type=submit 按钮将其拉出 . 使用带有多个按钮的 form 本地工作的唯一方法，但只有一个可以在按下 Enter 键时提交表单，以确保其中只有一个是 type=submit ，而其他类型是 type=button . 通过这种方式，您可以从在键盘支持方面处理浏览器表单的更好用户体验中受益 .

    回复于

相关问题