如何创建像链接一样的HTML按钮？

如何创建像链接一样的HTML按钮？因此，单击该按钮可将用户重定向到页面。

我希望它是可访问的，并且在URL中使用最少的额外字符或参数。

当前回答

您可以使用JavaScript：

代替http://www.google.com并确保在URL之前包含http://。

2019-02-25 18:51:38

其他回答

这个问题似乎有三种解决方案（都有利弊）。

解决方案1：表单中的按钮。

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

但问题是，在某些版本的流行浏览器（如Chrome、Safari和Internet Explorer）中，它在URL末尾添加了问号字符。换言之，您的URL上面的代码最终将如下所示：

http://someserver/pages2?

有一种方法可以解决这个问题，但需要服务器端配置。使用Apache Mod_rewrite的一个示例是重定向所有带有拖尾的请求？到其相应的URL，而不使用？。下面是一个使用.htaccess的示例，但这里有一个完整的线程：

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能因使用的Web服务器和堆栈而异。因此，总结一下这种方法：

赞成的意见：

这是一个真正的按钮，从语义上讲是有意义的。因为它是一个真实的按钮，所以它也会像真实的按钮一样（例如，当激活时按下空格键时，拖动行为和/或模仿单击）。不需要JavaScript，不需要复杂的样式。

欺骗：

尾随？在某些浏览器中看起来很难看。这可以通过黑客（在某些情况下）使用POST而不是GET来解决，但干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于304重定向，它将导致对这些链接的额外HTTP调用。添加额外的<form>元素当使用多种形式时，元素定位可能会很棘手，在处理响应式设计时会变得更糟。根据元素的顺序，使用此解决方案可能无法实现某些布局。如果设计受到这一挑战的影响，最终可能会影响可用性。

解决方案2：使用JavaScript。

您可以使用JavaScript触发onclick和其他事件，以使用按钮模拟链接的行为。下面的示例可以从HTML中改进和删除，但它只是为了说明这个想法：

<button onclick="window.location.href='/page2'">Continue</button>

赞成的意见：

简单（对于基本需求）并保持语义，而不需要额外的形式。因为它是一个真实的按钮，所以它也会像真实的按钮一样（例如，当激活时按下空格键时，拖动行为和/或模仿单击）。

欺骗：

需要JavaScript，这意味着不易访问。这对于基础（核心）元素（如链接）来说并不理想。

解决方案3：锚（链接）样式类似按钮。

将链接设置为按钮的样式相对容易，并且可以在不同的浏览器中提供类似的体验。Bootstrap可以做到这一点，但使用简单的样式也很容易实现。

赞成的意见：

简单（对于基本要求）和良好的跨浏览器支持。不需要<form>即可工作。不需要JavaScript来工作。

欺骗：

语义有点断裂，因为你需要一个像链接一样的按钮，而不是一个像按钮一样的链接。它不会再现解决方案#1的所有行为。它将不支持与按钮相同的行为。例如，链接在拖动时的反应不同。此外，如果没有额外的JavaScript代码，“空格键”链接触发器将无法工作。这将增加很多复杂性，因为浏览器在如何支持按钮上的按键事件方面并不一致。

结论

解决方案#1（表单中的按钮）对于用户来说似乎是最透明的，所需的工作最少。如果您的布局不受此选择的影响，并且服务器端的调整是可行的，那么对于可访问性是最高优先级的情况（例如，错误页面上的链接或错误消息），这是一个很好的选择。

如果JavaScript不是可访问性要求的障碍，那么解决方案#2（JavaScript）将优先于#1和#3。

如果出于某种原因，可访问性至关重要（JavaScript不是一个选项），但您的设计和/或服务器配置使您无法使用选项#1，那么解决方案#3（锚样式类似于按钮）是一个很好的替代方案，以最小的可用性影响解决此问题。

2016-05-19 23:29:45

它实际上非常简单，不使用任何表单元素。您可以只使用＜a＞标签，里面有一个按钮：）。

这样地：

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

它会将href加载到同一页面中。想要新页面吗？只需使用target=“_blank”。

EDIT

几年后，虽然我的解决方案仍然有效，但请记住，您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。

2014-02-11 15:29:15

如果您想创建一个充当链接的按钮，有多种方法可以实现。选择最适合您情况的。下面的代码在按钮内创建一个链接。

<按钮><a href=“www.google.com”>转到谷歌</a></按钮>

第二种方法是在单击按钮时打开一个新窗口

<button onclick=“open（'ww.google.com'）”>google</button>

或者添加事件侦听器

document.querySelector（“#btn”）.addEventListener（'click'，打开（'ww.google.com'））<button id=“btn”>转到Google</button>

有很多方法可以做到这一点，但这只是按钮的三个小例子，它们起到了链接的作用。换句话说，打开链接的按钮。

2021-04-04 00:47:36

随着其他一些人的添加，您可以使用一个简单的CSS类，不使用PHP，不使用jQuery代码，只使用简单的HTML和CSS。

创建一个CSS类并将其添加到锚点中。代码如下。

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

就是这样。这很容易做到，让你随心所欲地发挥创造力。您可以控制颜色、大小、形状（半径）等。有关详细信息，请参阅我在网站上找到的。

2013-12-03 05:09:21

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

2010-05-25 16:41:42

如何创建像链接一样的HTML按钮？

推荐文章

最新文章

标签