如何创建一个像链接一样的HTML按钮

作者

我想创建一个像链接一样的HTML按钮。因此，当您单击该按钮时，它将重定向到一个页面。我希望它能尽可能方便地使用

我也希望它没有任何额外的字符，或在URL参数

我怎样才能做到这一点

根据目前发布的答案，我目前正在做以下工作：

&lt；form method=&quot；获得；行动=&quot/第2页“&燃气轮机；
&lt；按钮类型=&quot；提交&燃气轮机；继续&lt/按钮&gt；
&lt/表格&gt；

但问题是，在Safari和InternetExplorer中，它在URL的末尾添加了一个问号字符。我需要找到一个解决方案，不添加任何字符的URL结尾

还有两种解决方案可以做到这一点：使用JavaScript或将链接样式设置为按钮

使用JavaScript：

&lt；按钮onclick=&quot；window.location.href=https://stackoverflow.com/page2""&燃气轮机；继续&lt/按钮&gt；

但这显然需要JavaScript，因此屏幕阅读器很难访问它。链接的目的是转到另一个页面。因此，试图让一个按钮表现得像一个链接是错误的解决方案。我的建议是，你应该使用一个链接和样式，它看起来像一个按钮

&lt；a href=&quot/链接/至/第2页“&燃气轮机；继续&lt/a&gt；

HTML

简单的HTML方式是将其放入&lt；表格&gt其中，您可以在操作属性中指定所需的目标URL

&lt；表单操作=”https://google.com“&gt；
&lt；输入type=“submit”value=“转到谷歌”/&gt；
&lt/表格&gt；

如有必要，设置CSSdisplay:inline以使其与周围的文本保持一致。而不是&lt；输入类型=“提交”&gt在上述示例中，您还可以使用&lt；按钮类型=“提交”&gt。唯一的区别是&lt；按钮&gt元素允许子元素

您直觉上希望能够使用&lt；按钮href=”https://google.com“&gt类似于&lt；a&gt元素，但不幸的是不存在，根据HTML规范，此属性不存在

CSS

如果允许使用CSS，只需使用&lt；a&gt通过使用外观属性（仅Internet Explorer不支持该属性），将其设置为按钮样式

&lt；a href=”https://google.com“class=”按钮“&gt；转到谷歌&lt/a&gt；

a.按钮{
-webkit外观：按钮；
-moz外观：按钮；
外观：按钮；
文字装饰：无；
颜色：首字母；
}

或者从众多CSS库中选择一个，比如Bootstrap

&lt；a href=”https://google.com“class=”btn btn primary“&gt；转到谷歌&lt/a&gt；

JavaScript

如果允许使用JavaScript，请设置窗口.location.href

&lt；输入type=“button”onclick=“location.href=”https://google.com“；”value=“转到谷歌”/&gt；

而不是&lt；输入类型=“按钮”&gt在上述示例中，您还可以使用&lt；按钮&gt。唯一的区别是&lt；按钮&gt元素允许子元素

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with