15

我看到我们可以写：

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

制作一个“链接按钮”。

但我知道我们可以写：

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

哪个会做同样的事情。

有什么不同？他们的浏览器兼容性如何？

4

5 回答 5

23

您链接到的那个页面不正确。HTML 中的属性没有link值。method这将导致表单回退到方法属性的默认值get，这相当于href无论如何都有一个属性的锚元素，因为两者都会导致 HTTPGET请求。methodHTML5 中表单的唯一有效值是“get”和“post”。

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

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

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

然而，当提交/点击时，两者都将进入同一页面（假设用户没有更改第一个文本字段

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

button,
.buttons a {
    cursor: pointer;
    font-size: 9.75pt;  /* maximum size in WebKit to get native look buttons without using zoom */
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.buttons a {
    margin: 2px;
    padding: 3px 6px 3px;
    border: 2px outset buttonface;
    background-color: buttonface;
    color: buttontext;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: button;
}
button img,
.buttons a img {
    -webkit-user-drag: none;
    -ms-user-drag: none;
}
.buttons form {
    display: inline;
    display: inline-block;
}
于 2012-07-20T15:30:59.340 回答
4

第二种情况不会处理 A 标记内的附加输入参数。它只会跟随 href ，而表单会将所有输入添加到请求 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>

会有所不同

于 2012-07-20T15:32:24.353 回答
2

功能上的差异。

虽然是的，但它们的行为都有些相似，但仍有一些理由将元素用于它们的用途。在大多数情况下，您会失去按钮链接的功能；例如，您不能右键单击并在新选项卡或窗口中打开。

还要考虑语义和规范：按钮元素（无论您使用哪种变体；<input type="button">或<button></button>）旨在供表单使用。

于 2012-07-20T15:32:52.433 回答
1

使用 a <a name="markname"></a>，您可以使用 URL 将标签的位置滚动到视图中，例如http://example.com/index.html#markname。我不认为表单或输入都这样做。而且我认为要使用<input type="button" window.location.href='foo.html'/>，必须激活 JavaScript。另外，<form>s通常会导致换行，<a>s不要。

于 2012-07-20T15:36:30.983 回答
0

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

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

作为参考，我使用：

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

对于按钮链接

于 2012-07-20T15:31:34.293 回答