如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
还可以使用按钮:
例如,在ASP.NET Core语法中:
// Some other tags
<form method="post">
<input asp-for="YourModelPropertyOrYourMethodInputName"
value="@TheValue" type="hidden" />
<button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
@(TextValue)
</button>
</form>
// Other tags...
<style>
.link-button {
background: none !important;
border: none;
padding: 0 !important;
color: #20a8d8;
cursor: pointer;
}
</style>
其他回答
另一个选项是在按钮中创建链接:
<button type="button"><a href="yourlink.com">Link link</a></button>
然后使用CSS来设置链接和按钮的样式,使链接占据按钮内的全部空间(这样用户就不会错过点击):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。
在浏览器控制台中键入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>
对于HTML 5和带有图像背景的样式按钮
<a id=“Navigate”href=“http://www.google.com"><输入type=“按钮”id=“导航按钮”style=“背景图像:url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);背景重复:无重复;背景位置:-272px-112px;光标:指针;高度:40px;宽度:40px;边框半径:26px;边框样式:实心;边框颜色:#000;边框宽度:3px;“title=”导航“/></a>
只需将按钮放在参考标签内。,
<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由您自己的连接决定,因此显然它不等于我的连接。
我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。