HTML 中的 <button> 可以在没有 javascript 的情况下做某事吗？答案

【问题标题】：Can a <button> in HTML do something without javascript?HTML 中的 <button> 可以在没有 javascript 的情况下做某事吗？
【发布时间】：2012-11-12 17:33:46
【问题描述】：

我有一个带有按钮的网页。目前我正在将此按钮绑定到一个 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来实现（如下图）。但我正在寻找更简洁的实现方式。

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

【问题讨论】：

如果你让它在没有 JavaScript 的情况下工作，你根本不需要 JS 版本，对吧？

标签： html button

【解决方案1】：

使用a 元素，这就是它们的用途：

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

然后简单地将其 style 设置为 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 Fiddle demo.

（显然，这假定使用支持appearance（或供应商前缀版本）CSS 属性的浏览器。）

参考资料：

【讨论】：

+1 虽然按钮看起来不像用户代理/操作系统特定按钮（除非您单独处理样式）
使用 CSS usabilitypost.com/2012/01/10/pressed-button-state-with-css3 也很容易让它看起来像按钮

【解决方案2】：

要回答标题中提出的问题，是的，button element 可以在没有 JavaScript 的情况下“做事”。使用type=submit，它会提交一个表单，如问题末尾的示例所示。使用type=reset，它会清除表单中的所有用户输入。只是 type=button（当元素在任何形式之外时的默认值）依赖于 JavaScript，并且在没有脚本的情况下不会做任何事情。

回答你应该问的问题：使用链接，卢克。如果您愿意，您可以将链接设置为看起来非常像按钮的样式（在类似应用程序的上下文中可能有意义），即使仅使用 CSS 2.1 以及可选的 CSS3 增强功能（如圆角）。

【讨论】：

【解决方案3】：

您可以通过在其前面添加<a> 标记来简单地添加按钮单击的实现（如果它引用任何网页）。例如：

<a href="https://www.youtube.com/">
    <button>Youtube</button>
</a>

据我所知，这不需要任何 JavaScript。

【讨论】：