如何创建像链接一样的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由您自己的连接决定,因此显然它不等于我的连接。
我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。
其他回答
这个问题似乎有三种解决方案(都有利弊)。
解决方案1:表单中的按钮。
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
但问题是,在某些版本的流行浏览器(如Chrome、Safari和Internet Explorer)中,它在URL末尾添加了问号字符。换言之,您的URL上面的代码最终将如下所示:
http://someserver/pages2?
有一种方法可以解决这个问题,但需要服务器端配置。使用Apache Mod_rewrite的一个示例是重定向所有带有拖尾的请求?到其相应的URL,而不使用?。下面是一个使用.htaccess的示例,但这里有一个完整的线程:
RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]
类似的配置可能因使用的Web服务器和堆栈而异。因此,总结一下这种方法:
赞成的意见:
这是一个真正的按钮,从语义上讲是有意义的。因为它是一个真实的按钮,所以它也会像真实的按钮一样(例如,当激活时按下空格键时,拖动行为和/或模仿单击)。不需要JavaScript,不需要复杂的样式。
欺骗:
尾随?在某些浏览器中看起来很难看。这可以通过黑客(在某些情况下)使用POST而不是GET来解决,但干净的方法是使用服务器端重定向。服务器端重定向的缺点是,由于304重定向,它将导致对这些链接的额外HTTP调用。添加额外的<form>元素当使用多种形式时,元素定位可能会很棘手,在处理响应式设计时会变得更糟。根据元素的顺序,使用此解决方案可能无法实现某些布局。如果设计受到这一挑战的影响,最终可能会影响可用性。
解决方案2:使用JavaScript。
您可以使用JavaScript触发onclick和其他事件,以使用按钮模拟链接的行为。下面的示例可以从HTML中改进和删除,但它只是为了说明这个想法:
<button onclick="window.location.href='/page2'">Continue</button>
赞成的意见:
简单(对于基本需求)并保持语义,而不需要额外的形式。因为它是一个真实的按钮,所以它也会像真实的按钮一样(例如,当激活时按下空格键时,拖动行为和/或模仿单击)。
欺骗:
需要JavaScript,这意味着不易访问。这对于基础(核心)元素(如链接)来说并不理想。
解决方案3:锚(链接)样式类似按钮。
将链接设置为按钮的样式相对容易,并且可以在不同的浏览器中提供类似的体验。Bootstrap可以做到这一点,但使用简单的样式也很容易实现。
赞成的意见:
简单(对于基本要求)和良好的跨浏览器支持。不需要<form>即可工作。不需要JavaScript来工作。
欺骗:
语义有点断裂,因为你需要一个像链接一样的按钮,而不是一个像按钮一样的链接。它不会再现解决方案#1的所有行为。它将不支持与按钮相同的行为。例如,链接在拖动时的反应不同。此外,如果没有额外的JavaScript代码,“空格键”链接触发器将无法工作。这将增加很多复杂性,因为浏览器在如何支持按钮上的按键事件方面并不一致。
结论
解决方案#1(表单中的按钮)对于用户来说似乎是最透明的,所需的工作最少。如果您的布局不受此选择的影响,并且服务器端的调整是可行的,那么对于可访问性是最高优先级的情况(例如,错误页面上的链接或错误消息),这是一个很好的选择。
如果JavaScript不是可访问性要求的障碍,那么解决方案#2(JavaScript)将优先于#1和#3。
如果出于某种原因,可访问性至关重要(JavaScript不是一个选项),但您的设计和/或服务器配置使您无法使用选项#1,那么解决方案#3(锚样式类似于按钮)是一个很好的替代方案,以最小的可用性影响解决此问题。
在<button></button>上使用<a></a>属性回答的人很有帮助。
但最近,我在<form></form>中使用链接时遇到了一个问题。
该按钮现在被视为提交按钮(HTML5)。我已经尝试了一种方法,并找到了这种方法。
创建一个CSS样式按钮,如下所示:
.btn-style {
border: solid 1px #0088cc;
border-radius: 6px;
moz-border-radius: 6px;
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
font-size: 18px;
color: #696869;
padding: 1px 17px;
background: #eeeeee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
}
或者在这里创建一个新的:CSS按钮生成器
然后用一个以您所创建的CSS样式命名的类标记创建链接:
<a href='link.php' class='btn-style'>Link</a>
这是一把小提琴:
JSFiddle公司
还可以使用按钮:
例如,在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 onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>
请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。
HTML回答:如果您想创建一个HTML按钮,该按钮的作用类似于链接,请使用两个常用属性:<a>和/或action=“”:
<form action="stackoverflow.com"/>
<button type="submit" value="Submit Form"
或
“href”是<a>属性的一部分。它有助于直接链接:
<a href=“stackoverflow.com”>href</a>