<form method =“link”>或<a>? What&#39;s the difference?</a> </form>

Question

我可以写saw：

<form method="link" action="foo.html" >
<input type="submit" />
</form>

制作“链接按钮”。

但我知道我们可以写：

<a href="foo.html" ><input type="button" /></a>

会做同样的事情。

有什么区别？他们的浏览器兼容性是什么？

Answer 1

您链接的页面不正确。 HTML中的link属性没有method值。这将导致表单回退到方法属性get的默认值，这相当于具有href属性的锚元素，因为两者都将导致HTTP {{1请求。 HTML5中表单GET的唯一有效值为“get”和“post”。

method

这与您的示例相同，但有效;并相当于：

<form method="get" action="foo.html">
    <input type="submit">
</form>

您应该使用语义来确定实现表单的方式。由于没有供用户填写的表单字段，因此这不是一个表单，因此您无需使用<a href="foo.html"> 来获得效果。

何时使用<form>表单的示例是搜索框：

GET

以上允许访问者输入他们自己的搜索查询，而这个锚元素不会：

<form action="/search">
    <input type="search" name="q" placeholder="Search" value="dog">
    <button type="submit">Search</button>
</form>

然而，两者都会在提交/点击时转到同一页面（假设用户没有更改第一个中的文本字段

---

顺便说一句，我使用以下CSS来获取看起来像按钮的链接：

<a href="/search?q=dog">Search for "dog"</a>

Answer 2

第二种情况不会处理A标记内的附加输入参数。它将仅跟随href，而form将添加所有输入以请求GET字符串。

<form action='http://localhost/?' method='get'><input type="text" name="test"><input type="submit" value="GO"/></form>

和

<a href='http://localhost/?'><input type="text" name="test"><input type="submit" value="GO"/></a>

会有不同的

Answer 3

功能差异。

虽然是的，但它们的行为有点像彼此，仍然有一些理由将元素用于它们的意图。在大多数情况下，您通过按钮链接失去了功能;例如，您无法右键单击并在新选项卡或窗口中打开。

考虑语义和规范：按钮元素（您使用的任何变体; <input type="button">或<button></button>）都是供表单使用。

Answer 4

使用<a name="markname"></a>，您可以使用以下网址将该标记的位置滚动到视图中http://example.com/index.html#markname。我不认为形式或输入都这样做。我认为，对于使用<input type="button" window.location.href='foo.html'/>，必须激活JavaScript。此外，<form>s通常会导致换行，<a>s不会。

Answer 5

所有提到的方法都会获得相同的结果，除非它们包含多个参数，例如：

<input type="button" value="Cancel">
<input type="button" value="Submit">

供参考我使用：

<form>
<INPUT TYPE='button' onClick="parent.location='location'">
</form>

用于按钮链接