or ? What’s the difference?

by

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="https://stackoverflow.com/questions/11582286/foo.html">
    <input type="submit">
</form>

This is the same as your example, but valid; and is equivalent to:

<a href="https://stackoverflow.com/questions/11582286/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="https://stackoverflow.com/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;
}

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. Disabling Chrome Autofill
  3. POST unchecked HTML checkboxes
  4. Chrome ignores autocomplete=”off”
  5. Is either GET or POST more secure than the other?
  6. Put icon inside input element in a form
  7. Does form data still transfer if the input tag has no name?
  8. When submitting a GET form, the query string is removed from the action URL
  9. Is autocomplete=”off” compatible with all modern browsers?
  10. Multiple submit buttons in an HTML form
  11. Disabled form fields not submitting data [duplicate]
  12. Is well formed without a ?
  13. HTML radio buttons allowing multiple selections
  14. Disable spell-checking on HTML textfields
  15. Why does file upload not work without the enctype property?
  16. Can a ::before selector be used with a ?
  17. What characters are allowed in the HTML Name attribute inside input tag?
  18. HTML select form with option to enter custom value
  19. Is there a valid way to disable autocomplete in a HTML form?
  20. How do I make a field required in HTML?
  21. HTML: Characters allowed for name attribute of input element?
  22. Forms with action=””
  23. Stop LastPass filling out a form
  24. HTML input field OUTSIDE of a form
  25. Firefox form targeting an iframe is opening new tab
  26. HTML Input is not updating value attribute on change
  27. HTML multiple select box
  28. Can I use an HTML input type “date” to collect only a year?
  29. How can I control the height of an Option element in Webkit?
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment