Html <form method="link" > 还是 <a>？有什么不同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11582286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<form method="link" > or <a>? What's the difference?
提问by Mageek
I sawthat we can write:
我看到我们可以写：
<form method="link" action="foo.html" >
<input type="submit" />
</form>
To make a "link button".
制作“链接按钮”。
But I know we can write:
但我知道我们可以写：
<a href="foo.html" ><input type="button" /></a>
Which will do the same.
这将做同样的事情。
What's the difference? What's their browser compatibility?
有什么不同？他们的浏览器兼容性如何？
回答by Nicholas Shanks
That page you link to is incorrect. There is no linkvalue for the methodattribute in HTML. This will cause the form to fall back to the default value for the method attribute, get, which is equivalent to an anchor element with a hrefattribute anyway, as both will result in a HTTP GETrequest. The only valid values of a form's methodin HTML5 are "get" and "post".
您链接到的页面不正确。HTML 中link的method属性没有值。这将导致表单回退到方法属性的默认值，无论如何，get这相当于具有href属性的锚元素，因为两者都会导致 HTTPGET请求。methodHTML5 中表单的唯一有效值是“get”和“post”。
<form method="get" action="foo.html">
<input type="submit">
</form>
This is the same as your example, but valid; and is equivalent to:
这与您的示例相同，但有效；相当于：
<a href="foo.html">
You should use semantics to determine which way to implement your form. Since there are no form fields for the user to fill in, this isn't really a form, and thus you need not use <form>to get the effect.
您应该使用语义来确定实现表单的方式。由于没有供用户填写的表单字段，这并不是真正的表单，因此您不需要使用它<form>来获得效果。
An example of when to use a GETform is a search box:
何时使用GET表单的一个示例是搜索框：
<form action="/search">
<input type="search" name="q" placeholder="Search" value="dog">
<button type="submit">Search</button>
</form>
The above allows the visitor to input their own search query, whereas this anchor element does not:
上面允许访问者输入他们自己的搜索查询，而这个锚元素不会：
<a href="/search?q=dog">Search for "dog"</a>
Yet both will go to the same page when submitted/clicked (assuming the user doesn't change the text field in the first
然而，当提交/点击时，两者都会进入同一页面（假设用户没有更改第一个文本字段
As an aside, I use the following CSS to get links that look like buttons:
顺便说一句，我使用以下 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;
}
回答by varela
The second case will not handle addition input arguments inside A tag. It will follow href only while form will add all inputs to request GET string.
第二种情况不会处理 A 标签内的附加输入参数。它只会跟随 href 而表单将添加所有输入以请求 GET 字符串。
<form action='http://localhost/?' method='get'><input type="text" name="test"><input type="submit" value="GO"/></form>
and
和
<a href='http://localhost/?'><input type="text" name="test"><input type="submit" value="GO"/></a>
would work different
会有所不同
回答by Vin Burgh
Differences in functionality.
功能上的差异。
While yes, they both behave somewhat like one another, there's still some reasons to use elements for what they're meant for. For the most part, you lose functionality with a button link; you cannot right click and open in a new tab or window, for example.
虽然是的，它们的行为有点像彼此，但仍然有一些理由将元素用于它们的目的。大多数情况下，您会因按钮链接而失去功能；例如，您不能右键单击并在新选项卡或窗口中打开。
Consider semantics and specs as well: The button element (whichever variation you use; <input type="button">or <button></button>) was meant for use by forms.
还要考虑语义和规范：按钮元素（无论您使用哪种变体；<input type="button">或<button></button>）是供表单使用的。
回答by PhilMasterG
With a <a name="markname"></a>you can scroll the position of that tag into view by using the URL e.g. http://example.com/index.html#markname. I don't think that either form or input do so. And I think that for using <input type="button" window.location.href='foo.html'/>, JavaScript would have to be activated. Also, <form>susually cause a line break, <a>sdon't.
使用 ，<a name="markname"></a>您可以使用 URL（例如 ）将该标签的位置滚动到视图中http://example.com/index.html#markname。我认为无论是表单还是输入都不会这样做。而且我认为要使用<input type="button" window.location.href='foo.html'/>，必须激活 JavaScript。另外，<form>s通常会导致换行，<a>s不要。
回答by David Passmore
All the mentioned methods achieve the same result, except if they contain multiple arguments, such as:
所有提到的方法都获得相同的结果，除非它们包含多个参数，例如：
<input type="button" value="Cancel">
<input type="button" value="Submit">
For reference I use:
作为参考，我使用：
<form>
<INPUT TYPE='button' onClick="parent.location='location'">
</form>
For a button link
对于按钮链接
