html - <form method="link" > or <a>? What's the difference?

Question

I saw that 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?

Answer 1

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.

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

---

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