如何创建一个像链接一样的 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.

我怎样才能做到这一点?

How can I achieve this?

根据迄今为止发布的答案，我目前正在这样做:

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 方法是将它放在

中，其中您在 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; 以使其与周围的文本保持流​​畅.除了上面示例中的 ，您还可以使用 .唯一的区别是 元素允许子元素.

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>，您可以使用 appearance 属性 (仅在 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" />

除了上面例子中的，你也可以使用

.唯一的区别是 元素允许子元素.

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屋！