HTML按钮:导航到其他页面 - 不同的方法

Question

有多种方法可以创建HTML按钮以导航到其他页面.

方法1

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

• 优点:从HTML中分离JS(MVC)
• 缺点:长码,依赖JS
• 注意:jQuery选择器是可选的,可以使用传统的JavaScript

方法2

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

• 优点:1-liner,无需为按钮分配ID
• 缺点:将JS与HTML混合,依赖JS

方法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>

• 优点:无需依赖JS
• 缺点:看起来像假的按钮,需要IE9 +(appearance是一个CSS3属性)
• 注意:这是从这里开始的

方法4

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

• 优点:最短的代码,无需依赖JS
• 缺点:滥用<form>标签.如果有另一个提交按钮,则不起作用

程序员,哪种方法是最有效的(因此广泛使用),为什么？

注意:我们可以将其作为社区维基吗？

Answer 1

我做一个链接。链接就是链接。链接导航到另一个页面。这就是链接的用途，每个人都明白这一点。所以方法3是我书中唯一正确的方法。

我根本不希望我的链接看起来像一个按钮，当我这样做时，我仍然认为功能比外观更重要。

按钮不太容易访问，不仅是因为需要 Javascript，而且还因为视障人士的工具可能无法很好地理解这个 Javascript 增强按钮。

方法 4 也可以，但它更像是一个技巧，而不是真正的功能。您滥用表单在其他页面上发布“任何内容”。它不干净。