html - <表单方法 ="link"> 或 ？有什么不同？

Question

我saw我们可以这样写:

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

制作一个“链接按钮”。

但我知道我们可以这样写:

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

哪个会做同样的事情。

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

Answer 1

您链接到的页面不正确。没有 link method 的值HTML 中的属性。这将导致表单回退到方法属性的默认值get。 ，相当于一个带有 href 的 anchor 元素属性，因为两者都会导致 HTTP GET要求。表单的唯一有效值 method在 HTML5 中是“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>

上面允许访问者输入他们自己的搜索查询，而这个 anchor 元素不允许:

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