HTML Button : Navigate to Other Page - Different Approaches [closed]

Question

There are multiple ways to create a HTML button to navigate to other page.

Method 1

<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>

• Advantage: Separate JS from HTML (MVC)
• Disadvantage: Long codes, rely on JS
• Note: jQuery selector is optional, can use traditional JavaScript

Method 2

<button onclick="window.location='http://www.google.com'">Click Me</button>

• Advantage: 1-liner, no need assign ID to button
• Disadvantage: Mix JS with HTML, rely on JS

Method 3

<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.clickMe {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}​
</style>

• Advantage: no need to rely on JS
• Disadvantage: Looks like a fake button, IE9+ required ( appearance is a CSS3 property )
• Note: this is from here

Method 4

<form action="http://www.google.com">
<button>Click Me</button>
</form>

• Advantage: Shortest code, no need to rely on JS
• Disadvantage: Misuse of <form> tag. Does not work if there is another submit button

Programmers, which approaches is the most efficient (and hence used widely), and why?

Note: can we make this as community wiki ?

Answer 1

I make a link. A link is a link. A link navigates to another page. That is what links are for and everybody understands that. So Method 3 is the only correct method in my book.

I wouldn't want my link to look like a button at all, and when I do, I still think functionality is more important than looks.

Buttons are less accessible, not only due to the need of Javascript, but also because tools for the visually impaired may not understand this Javascript enhanced button well.

Method 4 would work as well, but it is more a trick than a real functionality. You abuse a form to post 'nothing' to this other page. It's not clean.