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

Answer 2

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.

<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

Answer 3

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>s usually cause a line break, <a>s don't.

Answer 4

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.

Answer 5

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