Question

我的桌子大约有50行。每行都有链接，但我需要通过按钮替换此链接。我有几种方法可以做到这一点，但我不知道哪种方式最好。

第一种方式：

<form method="POST" action="some url">
   <input type="submit" value="Clickable Button">
</form>

第二种方式：

<input type="button" value="Action button"
onclick="window.location='http://www.w3schools.com'" />

第三种方式：

<input type="button" class="actionButton" value="Action button"
data-link="http://www.w3schools.com"/>

之后我将使用jQuery添加javascript代码：

$("input.actionButton").click(function () {
   window.location = $(this).attr("data-link");
});

那么，最好的方法是什么？

Answer 1

在这三个中，我会使用form，但如果每个链接都在不同的位置，那么复制链接功能的形式很多。

但我有第四个选择：设置链接的样式而不是替换它。您可以使链接看起来任何您想要的方式，包括几乎完全像按钮。由于是一个链接，这将是最具语义正确性的选项（以及较少复杂的标记）。显然，这取决于你必须用一个按钮替换链接的原因 - 例如，如果有一些功能，而不是外观，要求这样做。

Answer 2

使用表单似乎是语义上最正确的方式。除此之外，它不需要任何JavaScript。我会先走第一条路。您可以在此表单中包含隐藏字段，以将其他值传递给服务器。

Answer 3

如果它是一个看起来像按钮的链接，我会使用一个<a>标签样式看起来像一个按钮：

/* See http://www.w3.org/TR/CSS2/fonts.html and search for system fonts */
/* See http://www.w3.org/TR/css3-color/#css-system and search for system colors */

.button {
  display: inline-block;
  cursor: default;
  font: small-caption;
  color: buttontext;
  background-color: buttonface;
  border: 2px outset buttonface;
  padding: 1px 6px;
  text-decoration: none;
}

<p>
  <a href="#" class="button">View</a>
  <a href="#" class="button">Cancel</a>
</p>

Answer 4

同意，第一种方式是最语义正确的，没有任何JavaScript的方法，但是，我仍然会采用第二种或第三种方式（取决于你是否还需要jQuery）。通过在那里使用函数，您可以提供更多功能，而不仅仅是重定向。我不知道，如果您可能面临其他功能的要求，那么您可以保持这种可能性。

使用链接行为制作html按钮的最佳方法是什么？

4 个答案: