如何创建像链接一样的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>

其他回答

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

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

您还可以将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中测试过它。

对于Nicolas的回答,以下内容对我有用,因为该回答没有type=“button”,因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在,您可以向按钮或<a>添加一个类以获得所需的布局:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>
<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

只需将按钮放在参考标签内。,

<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由您自己的连接决定,因此显然它不等于我的连接。

我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。