为什么在锚标签点击时提交表单？答案

【问题标题】：why form getting submitted on anchor tag click?为什么在锚标签点击时提交表单？
【发布时间】：2021-04-09 04:28:40
【问题描述】：

<form action="/users" method="GET">
    <input type="text" id="username" name="username" required><br>
    <button type="submit">Search</button>    
    <a href='/users'><button>Clear</button></a>
</form>

当我点击锚标签表单被提交时，我不希望表单在锚标签点击时被提交。当我将锚标签从表单中取出时，它不会提交。

我想要的是在表单中有锚标记而不是在单击锚标记时提交，它应该仅在单击按钮时提交。

【问题讨论】：

标签： html

【解决方案1】：

默认情况下，表单内的按钮会在点击时提交。可以指定type="button"，防止点击按钮时提交表单（如下面第一个sn-p）

锚标记和按钮，两者都在同一处 似乎不需要在那里。如果不需要，您可以删除锚标记！在下面这个sn-p中，不会提交表单，但是页面会被重定向到/users（这就是为什么点击后页面空白）

<form action="/users" method="GET">
    <input type="text" id="username" name="username" required><br>
    <button type="submit">Search</button>    
    <a href='/users'><button type="button">Clear</button></a>
</form>

如果要在单击清除按钮时清除表单，请使用type="reset"

<form action="/users" method="GET">
    <input type="text" id="username" name="username" required><br>
    <button type="submit">Search</button>    
    <button type="reset">Clear</button>
</form>

【讨论】：

我希望表单仅在按钮 type="submit" 上提交，并在单击锚标记时进行 http 重定向，问题是当我单击锚标记时，url 参数没有被重置。
网址参数？你能试试<button type="button" onclick="location.href='/users';">Clear</button>吗？或者你可以只使用锚标记并使用 CSS 使其看起来像一个按钮。

【解决方案2】：

仅仅是因为您在 Anchor 标签中使用了 Button 标签。默认情况下，单击时在 Button 上触发表单

【讨论】：

你说得对，我从来没有注意到，但后来我记得我的 css 是基于按钮的，所以我不能从锚标签中删除它。