Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

forms

get

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?

like image 478
Mageek Avatar asked Jul 20 '12 15:07

Mageek


People also ask

What does form method mean?

The method attribute of the form element tells the web browser how to send form data to a server. Specifying a value of POST means the browser will send the data to the web server to be processed. This is necessary when adding data to a database, or when submitting sensitive information, such as passwords.

What is the difference between href and form action?

</form> Forms are used to pass user-data to a specified URL. The biggest difference is that <form> is a tag and href is an attribute.

How many types of method are there in form?

There are two kinds of HTTP methods, which are GET and POST. The method attribute can be used with the <form> element. Attribute Values: GET: In the GET method, after the submission of the form, the form values will be visible in the address bar of the new browser tab.

What is form GET method?

The GET method is the method used by the browser to ask the server to send back a given resource: "Hey server, I want to get this resource." In this case, the browser sends an empty body. Because the body is empty, if a form is sent using this method the data sent to the server is appended to the URL.


1 Answers

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;
}
like image 86
Nicholas Shanks Avatar answered Oct 26 '22 15:10

Nicholas Shanks