<表单方法=“链接">或<a>?有什么不同? [英] <form method="link" > or <a>? What's the difference?

问题描述

我看到我们可以写:

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

制作链接按钮".

但我知道我们可以写:

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

哪个会做同样的事情.

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

What's the difference? What's their browser compatibility?

推荐答案

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

That page you link to is incorrect. There is no link value for the method attribute 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 href attribute anyway, as both will result in a HTTP GET request. The only valid values of a form's method in HTML5 are "get" and "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.

何时使用 GET 表单的一个例子是搜索框:

An example of when to use a GET form is a search box:

<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

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

As an aside, I use the following CSS to get links that look like buttons:

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

这篇关于<表单方法=“链接">或<a>?有什么不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！