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

Question

<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>

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

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

Answer 1

默认情况下，表单内的按钮在单击时提交。您可以指定type="button"在单击按钮时阻止提交表单（如下面的第一个片段所示）

锚标签，以及按钮，同时在同一似乎并不需要在那里。如果不需要，您可以删除锚标记！在下面的代码段中，不会提交表单，但页面将被重定向到/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>