如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

我希望它是可访问的,并且在URL中使用最少的额外字符或参数。


当前回答

您还可以将buttons类型属性设置为“button”(它使其不提交表单),然后将其嵌套在链接中(使其重定向用户)。

这样,如果需要,您可以在同一表单中有另一个按钮来提交表单。我还认为,在大多数情况下,这比将表单方法和动作设置为链接更可取(除非我猜是搜索表单…)

例子:

<form method=“POST”action=“/SomePath”><input type=“text”name=“somefield”/><a href=“www.target.com”><button type=“button”>转到目标</按钮></a><button type=“submit”>提交表单</button></form>

这样,第一个按钮重定向用户,而第二个按钮提交表单。

小心确保按钮不会触发任何动作,否则会导致冲突。同样,正如Arius所指出的,您应该意识到,出于上述原因,根据标准,严格来说,这并不是有效的HTML。不过,它在Firefox和Chrome中确实可以正常工作,但我还没有在Internet Explorer中测试过它。

其他回答

您还可以将buttons类型属性设置为“button”(它使其不提交表单),然后将其嵌套在链接中(使其重定向用户)。

这样,如果需要,您可以在同一表单中有另一个按钮来提交表单。我还认为,在大多数情况下,这比将表单方法和动作设置为链接更可取(除非我猜是搜索表单…)

例子:

<form method=“POST”action=“/SomePath”><input type=“text”name=“somefield”/><a href=“www.target.com”><button type=“button”>转到目标</按钮></a><button type=“submit”>提交表单</button></form>

这样,第一个按钮重定向用户,而第二个按钮提交表单。

小心确保按钮不会触发任何动作,否则会导致冲突。同样,正如Arius所指出的,您应该意识到,出于上述原因,根据标准,严格来说,这并不是有效的HTML。不过,它在Firefox和Chrome中确实可以正常工作,但我还没有在Internet Explorer中测试过它。

实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。

您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。

在JavaScript中

setLocation(base: string) {
  window.location.href = base;
}

HTML格式

<button onclick="setLocation('/<whatever>')>GO</button>"

还可以使用按钮:

例如,在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>

如果您使用的是SSL证书:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>