HTML中的<button>可以在没有javascript的情况下执行某些操作吗？

Question

我有一个有按钮的网页.目前,我将此按钮绑定到一个javascript处理程序,使其在单击时将页面重定向到给定的URL.

HTML:

<button class="click-me">Clike me to navigate</button>

JS:

$('.click-me').on('click', function() { window.location = '/myloc'; });

我现在正在尝试构建此页面的后备(无javascript)版本.我想这个按钮做同样的工作但不使用javascript.换句话说,即使浏览器的javascript被禁用,我也试图让这个按钮正常工作.

我知道这可以通过表格来实现(如下图所示).但我正在寻找任何更清洁的实施.

<form name="hack" action="/myloc">
  <button type="submit" class="click-me">Click me to navigate</button>
</form>

Answer 1

使用一个a元素,这就是他们的用途:

<a class="click-me" href="/path/to/whatever/page">Click me to navigate</a>

然后只需样式它作为一个button.

例如,使用以下CSS:

.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;
}?

JS小提琴演示.

(显然,这假设使用支持appearance(或供应商前缀版本)CSS属性的浏览器.)

参考文献:

• appearance(虽然它是-moz-带有前缀的MDN文档).
• appearance财产,在W3C.
• 不幸的是 - 删除了CSS3功能(在W3C).

Answer 2

要回答标题中提到的问题,是的,button元素可以在没有JavaScript的情况下"做事".使用type=submit,它会提交一个表单,如问题末尾的示例所示.使用type=reset,它会从表单中清除所有用户输入.它只是type=button(当元素在任何形式之外时的默认值)依赖于JavaScript,并且在没有脚本的情况下不执行任何操作.

要回答你应该问的问题:使用链接,卢克.如果你想要的话,你可以设置链接看起来非常像按钮(在类似应用程序的上下文中可能有意义),甚至只使用CSS 2.1加上可选的CSS3增强功能,如圆角.