HTML按钮与HTML提交的区别是什么？

Question

HTML按钮与HTML提交的区别是什么？

12

我有一个输入文本框和一个搜索提交按钮，当用户点击搜索提交按钮时，我希望将用户重定向到URLhttp://testsearch/results.aspx?k=<value of text box k>，例如，如果用户将"StackOverflow"放入文本框中，然后单击搜索按钮，我希望将用户重定向到以下页面： http://testsearch/results.aspx?k=StackOverflow 我发现当我使用搜索按钮时，它可以正常工作（见下面的源代码）。

  <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

但是当我使用提交搜索按钮时，它不起作用（请参见下面的源代码），为什么？

  <input type="text" id="k" name="k" />
 <input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

先感谢您，George

- George2

4

两个代码示例看起来是相等的。 - naivists

1

如果在onclick事件中没有放置任何代码，我不明白"button"案例是如何工作的。这是完整的示例吗？ - helios

抱歉，我忘记添加onclick事件了，我刚刚修改了我的帖子。有什么想法吗？ - George2

2

你的提交按钮没有作用，很可能是因为它没有被包含在表单元素中。 - Yoni

为了使提交按钮起作用，我们必须将其包含在表单中吗？ - George2

6个回答

8

- Harmen

抱歉，我忘记在代码中添加onclick事件了。已经纠正过来了。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有表单元素。 - George2

1

是的，将<input/>元素包裹在<form action="result.aspx" method="get"> </form>中。 - Harmen

4

如果你的表单中只有这个字段，那么只需将表单的方法设置为“get”，它就会正常工作。

<html>
<body>
    <form action="http://localhost/mytest" method="get" >
        <input type="text" id="k" name="k" />
        <input type="submit" id="Go" value="Search" />
    </form>
</body>
</html>

- Asaf R

抱歉，我忘记在代码中添加onclick事件了。已经纠正过来了。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始代码中，没有表单元素。 - George2

4

如果您想使用JavaScript，请查看@Sarfraz Ahmed的答案。但是，除非您在那里有充分的理由使用JavaScript，否则我建议您选择普通的HTML（就像我的答案一样）。 - Asaf R

据我所知 - 是的，你必须在表单中包含它（不用说 - 这是常规做法） - Asaf R

3

<button> 表示“在页面中放置一个按钮并执行 onclick 事件所定义的操作”。如果您没有编写 onclick 处理程序，页面将不会执行任何操作。

如果您使用 submit，那么可以正常工作，因为您想要重定向到另一个页面。

如果您仍然想使用 button，可以按照以下方式操作：

<script>
function doTheSearch() {
  // do the submit mannually
  document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
 <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>

警告：带有onclick的提交按钮

如果您在表单中有一个提交按钮，并且它带有onclick事件，某些浏览器会执行以下操作：

1）执行onclick

2）执行提交操作

您的onclick试图重定向，但是提交按钮获胜了。

如果您想避免这种情况，您有一些选择：

a）将提交按钮更改为普通按钮

b）避免提交操作（在表单元素中添加onsubmit="return false;"）

c）使用提交程序（form action="..." method="get"，没有onclick事件），浏览器将很高兴，您可以在onsubmit事件中控制提交（您可以取消它或不取消）。

- helios

抱歉，我忘记在代码中添加onclick事件，已经更正了。在我的情况下，提交和按钮之间有什么区别，为什么提交无法工作？在我的原始代码中，没有表单元素。 - George2

1

我添加了一个非常重要的警告（我之前调试过类似的情况）。我认为它回答了这个问题。 - helios

1

如果用户通过在文本字段中按Enter键提交表单，则提交按钮的onclick事件将不会触发。 - robertc

1

事实上，这是选择提交按钮和普通按钮的好标准（“我想通过表单内的Enter键发送查询吗？”）。 - helios

1

是的。因为提交意味着“使用<form method =“...”>中指定的方法将请求发送到<form action =“...”>中指定的URL，并包括表单的所有数据。您可以在页面上有多个表单，每个表单都有自己的提交按钮和数据。注意：如果您想将提交按钮用作普通按钮，则可以（它仍然具有onclick事件），但应改用<input type =“button”...>。 - helios

1

请确保您使用GET方法将输入放在表单标签中：

<form action='http://testsearch/results.aspx' method='GET'>
  ... inputs
</form>

- Pim Jager

抱歉，我忘记在代码中添加onclick事件了。已经纠正过来了。在我的情况下，提交和按钮有什么区别，为什么提交不起作用？在我的原始情况下，没有表单元素。 - George2

1

如果我理解正确的话，它不起作用是因为它不在表单标签中。如果您将其放入带有 method="get" 的表单标签中，它应该可以工作。按钮之所以有效，是因为它不必在表单中。

- Evan

抱歉，我在代码中忘记添加onclick事件。我刚刚纠正了它。在我的情况下，提交（submit）和按钮（button）有什么区别，为什么提交不起作用？在我的原始代码中没有表单元素。 - George2

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sarfraz · Accepted Answer

您甚至可以以这种方式使用提交按钮：

 <input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />

语义上，提交按钮用于提交表单而不是重定向页面。你应该使用普通的按钮类型来实现这个功能。然而，就像我展示的那样，你也可以使用提交按钮，但我认为这并不符合语义。

下面一行代码可以阻止表单被提交。

return false;

这就是您代码中缺少的部分 :)

谢谢