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

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


当前回答

在JavaScript中

setLocation(base: string) {
  window.location.href = base;
}

HTML格式

<button onclick="setLocation('/<whatever>')>GO</button>"

其他回答

如果您在基本HTML锚标记中查找的是按钮的视觉外观,那么您可以使用Twitter Bootstrap框架将以下任何常见HTML类型的链接/按钮格式化为按钮。请注意框架版本2、3或4之间的视觉差异:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

引导(v4)示例外观:

引导(v3)示例外观:

引导(v2)示例外观:

在浏览器控制台中键入window.location并按Enter键。然后,您可以清楚地知道位置包含:

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

您可以从这里设置任何值。

因此,对于重定向另一个页面,可以使用链接设置href值。

   window.location.href = your link

在您的案例中:

   <button onclick="window.location.href='www.google.com'">Google</button>

它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。

这样地:

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

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

EDIT

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

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

解决方案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(锚样式类似于按钮)是一个很好的替代方案,以最小的可用性影响解决此问题。

从HTML5开始,按钮支持formaction属性。最重要的是,不需要JavaScript或诡计。

<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出!</button></form>

注意事项

必须由<form>标记包围。<button>类型必须是“submit”(或未指定)-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说,如果在另一个表单中执行此操作,将导致冲突。

参考:formaction

浏览器支持:<button>:button元素