如何创建充当链接的HTML按钮 [英] How to create an HTML button that acts like a link
问题描述
我想创建一个类似于链接的HTML按钮.因此,当您单击按钮时,它将重定向到页面.我希望它尽可能地易于访问.
I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.
我也希望这样做,因此URL中没有任何多余的字符或参数.
I would also like it so there aren't any extra characters, or parameters in the URL.
我该如何实现?
根据到目前为止发布的答案,我目前正在这样做:
Based on the answers posted so far, I am currently doing this:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
但是问题是在 Safari 和 Internet Explorer ,它会在URL的末尾添加一个问号字符.我需要找到一种不会在URL末尾添加任何字符的解决方案.
but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.
还有其他两种解决方案:使用JavaScript或设置链接的样式以使其看起来像按钮.
There are two other solutions to do this: Using JavaScript or styling a link to look like a button.
使用JavaScript:
Using JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
但这显然需要JavaScript,因此,屏幕阅读器无法访问它.链接的重点是转到另一个页面.因此,试图使按钮像链接一样工作是错误的解决方案.我的建议是,您应该使用链接和使其看起来像按钮.
But this obviously requires JavaScript, and for that reason it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.
<a href="/link/to/page2">Continue</a>
推荐答案
HTML
普通的HTML方法是将其放入< form>
中,您可以在 action
属性中指定所需的目标URL.
HTML
The plain HTML way is to put it in a <form>
wherein you specify the desired target URL in the action
attribute.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
如有必要,在表单上设置CSS display:inline;
,以使其与周围的文本保持一致.除了上面的示例中的< input type ="submit">
外,您还可以使用< button type ="submit">
.唯一的区别是< button>
元素允许子元素.
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of <input type="submit">
in above example, you can also use <button type="submit">
. The only difference is that the <button>
element allows children.
您直观地希望能够使用< button href ="https://google.com">
与< a>
相似元素,但不幸的是,根据 HTML规范,该属性不存在.
You'd intuitively expect to be able to use <button href="https://google.com">
analogous with the <a>
element, but unfortunately no, this attribute does not exist according to HTML specification.
如果允许使用CSS,则只需使用< a>
,您可以使用仅在Internet Explorer中不支持.
If CSS is allowed, simply use an <a>
which you style to look like a button using among others the appearance
property (it's only not supported in Internet Explorer).
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
或者选择许多CSS库之一,例如 Bootstrap .
Or pick one of those many CSS libraries like Bootstrap.
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
如果允许使用JavaScript,则设置 window.location.href
.
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
您也可以使用< button>
代替上面的示例中的< input type ="button">
.唯一的区别是< button>
元素允许子元素.
Instead of <input type="button">
in above example, you can also use <button>
. The only difference is that the <button>
element allows children.
这篇关于如何创建充当链接的HTML按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!