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?
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.
</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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With