如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
只需将按钮放在参考标签内。,
<a href="https://www.google.com/"><button>Next</button></a>
这似乎非常适合我,并且没有添加任何%20标签到链接中,只是你想要的。我使用了一个到谷歌的链接来演示。
当然,您可以将其包装在表单标记中,但这不是必需的。
当链接另一个本地文件时,只需将其放在同一文件夹中并添加文件名作为引用即可。如果不在同一文件夹中,请指定文件的位置。
<a href="myOtherFile"><button>Next</button></a>
这也不会在URL的结尾添加任何字符,但在以文件名结尾之前,它确实将文件项目路径作为URL。例如
如果我的项目结构是。。。
..表示文件夹\
表示文件而四|表示父文件夹中的子目录或文件
平民的|||| ..html格式|||||||-main.html|||||||-ssecondary.html
如果我打开main.html文件,
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
然而,当我单击main.html中的按钮以更改为secondary.html时,URL将是,
http://localhost:0000/public/html/secondary.html
URL末尾不包含特殊字符。
顺便说一句-(%20表示URL中的一个空格,它编码并插入到它们的位置。)
注意:localhost:0000显然不是0000。您将有自己的端口号。
此外_ijt=xxxxxxxxxxxxxx在main.html URL的末尾,x由您自己的连接决定,因此显然它不等于我的连接。
我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。
其他回答
从HTML5开始,按钮支持formaction属性。最重要的是,不需要JavaScript或诡计。
<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出!</button></form>
注意事项
必须由<form>标记包围。<button>类型必须是“submit”(或未指定)-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说,如果在另一个表单中执行此操作,将导致冲突。
参考:formaction
浏览器支持:<button>:button元素
这里的所有解决方案都不适合我,所以在尝试了所有解决方案之后,我得到了一些微不足道的东西:仅HTML(无表单提交),无CSS,无JS:
<a href="/link"><button>Link</button></a>
它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。
这样地:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。
EDIT
几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。
在浏览器控制台中键入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>