Home / Questions / 48805
Accepted
gbianchi
Asked: 2020-02-11 06:57:10 +0800 CST 2020-02-11 06:57:10 +0800 CST

如何创建一个用作链接的 HTML 按钮？

  • 772

我想创建一个 HTML 按钮，它就像一个可点击的链接一样工作。当我按下按钮时，我希望它把我重定向到一个页面。我希望它尽可能易于访问。

我还希望 URL 中没有多余的字符或参数。

如何才能做到这一点？

html

3 Answers

  1. Best Answer

    注意：您已经有了许多选项的答案，我将提供一个与您已有的类似但专注于“并且我希望它尽可能易于访问”的部分。

    链接和按钮具有不同的功能：链接连接到其他内容，而按钮将与操作相关联（它们不必重定向到任何地方或连接到任何东西）。

    考虑到可访问性，不建议将按钮更改为链接功能。事实上，这与 W3C （我的翻译）提出的建议相同：

    警告：使用 HTML 时，请使用<a>. 不建议作者重新利用其他元素来创建链接。

    它不仅在语义上不一致，而且还可能导致问题，具体取决于您实现它所遵循的方法。例如，如果用户禁用了 JavaScript（在浏览器中很少见，在某些屏幕阅读器中并不罕见），则 Wiki 答案中描述的某些方法将无法直接工作。

    这就是为什么，从可访问性的角度来看，创建一个像链接一样工作的按钮的最佳方法是使用一个链接并将它的样式设置为看起来像一个按钮：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button class="btn btn-success">¿Soy un botón o un enlace?</button>
<a href="#" class="btn btn-success">¿Soy un botón o un enlace?</a>

    如果尽管有此建议，您仍想像使用链接一样使用按钮，则可以使用上述任何方法...但是要使其可访问，您必须告诉浏览器（或屏幕阅读器）此按钮不是真的是一个链接。按钮，但一个链接，你应该这样对待它。为此，您必须使用role="link".

    与role="link"您一起表明该元素的行为将类似于链接的行为。所以你可以有这样的东西：

    .enlace {
  display:inline;
  border:0;
  padding:0;
  margin:0;
  text-decoration:underline;
  background:none;
  color:#000088;
  font-family: arial, sans-serif;
  font-size: 1em;
  line-height:1em;
}

.enlace:hover {
  text-decoration:none;
  color:#0000cc;
  cursor:pointer;
}
    <button class="enlace" role="link" onclick="window.location='http://es.stackoverflow.com'">¿Soy un botón o un enlace?</button>
<a class="enlace" href="http://es.stackoverflow.com">¿Soy un botón o un enlace?</a>

    • 19

  2. 从这里复制的答案

    HTML

    <formulario>执行此操作的纯 HTML 方法是在属性操作 ( action)中指定目标 URL 。

    <form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

    如有必要，display: inline在表单中设置 CSS 以保持周围文本的流动。<input type="submit">您可以使用<button type="submit">. 唯一的区别是这个元素允许子元素。

    直观地期望能够<button href="http://google.com">与元素一起使用，但不幸的是，根据HTML 规范<a>，该属性不存在。

    CSS

    如果您可以使用 CSS，只需将 a<a>与样式一起使用，使其看起来像一个使用其他外观属性的按钮（只有 IE 支持它（截至 2015 年 7 月），它仍然很差）。

    <a href="http://google.com" class="button">Go to Google</a>



a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

    或者使用许多 CSS 库之一，例如bootstrap。

    <a href="http://google.com" class="btn btn-default">Go to Google</a>

    javascript

    如果允许 JavaScript，请设置window.location.href.

    <input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

    从这里复制的答案

    如果您想要实现的是纯 HTML 中按钮的基本外观，在锚 ( <a>) 标记内，那么您可以使用Twitter Bootstrap框架来格式化以下任何常规 HTML 按钮/链接，就好像它是一个按钮一样。此框架的版本之间存在细微差别，请记住这一点。

    <a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

    Bootstrap (v2)显示示例：

    Boostrap 按钮的示例输出

    Bootstrap (v3)显示示例：

    在此处输入图像描述

    有关一些示例，请参阅按钮部分中的Bootstrap (v2)或Bootstrap (v3)。

    • 8

  3. 如果您想要做的是一个带有按钮外观的 html 链接，可以通过为相关链接提供一个 css 类来轻松实现，让我解释一下：

    为了给它一个完整的外观，我建议使用 Bootstrap 样式库，将 Bootstrap cdn 放在页面的头部（cdn 是一个连接器，允许您在项目中没有物理地使用这些库，您必须连接到互联网能够使用样式，这很重要！）。

    随后，创建任何链接并为其添加一个类，Bootstrap 有很多，按钮类是 btn，其不同的形式是 btn-success、btn-warning、btn-danger 等等。

    <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
      crossorigin="anonymous">

<a href="https://google.com" class="btn btn-success"> Ir a Google !</a>

    我希望我有所帮助。您的项目成功！

    • 2