如何创建一个类似于链接的 HTML 按钮？

电玩女神 2024-03-30 14:45 69阅读 0赞

## 问： ##

如何创建一个类似于链接的 HTML 按钮？因此，单击按钮会将用户重定向到页面。

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

## 答1: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

HTML

纯 HTML 方法是将其放在 中，您可以在其中在 action 属性中指定所需的目标 URL。

如有必要，在表单上设置 CSS display: inline; 以使其与周围的文本保持一致。除了上面示例中的 ，您还可以使用 。唯一的区别是 元素允许子元素。

您会直观地期望能够使用与 元素类似的 ，但不幸的是，不，根据 HTML specification，此属性不存在。

CSS

如果允许 CSS，只需使用 ，您可以使用 appearance 属性 (it’s only not supported in Internet Explorer) 将其设置为看起来像按钮的样式。

a.button \{ -webkit-appearance: 按钮； -moz-外观：按钮；外观：按钮；文字装饰：无；颜色：初始； \} 转到谷歌

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

Go to Google

JavaScript

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

除了上面示例中的 ，您还可以使用 。唯一的区别是 元素允许子元素。

`简单而美好。一个很好的解决方案。将 display: inline 添加到表单以使按钮保持在流中。`

`在 safari 中，这会在 url 的末尾添加一个问号......有没有办法做到这一点，不会在 url 中添加任何内容？`

`@BalusC 不错的解决方案，但如果它在其他表单（父表单）内，则按下此按钮将重定向到父表单操作属性中的地址。`

`只是我还是 标签缺少明显的 href 属性？`

`看起来简单漂亮，但如果考虑不当可能会产生副作用。即在页面中创建第二个表单，嵌套表单等。`

## 答2: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

www.example.com

请注意，type=“button” 属性很重要，因为 its missing value default is the Submit Button state。

`似乎如果您不指定 type="button" 这并不总是有效。看起来按钮将默认为“提交”`

`如果您想在新窗口/标签中打开链接，请使用：onclick="window.open('example.com','_blank');"`

`@kenitech correct, according to specs：“缺失值默认值是提交按钮状态。”`

`但用户无法右键单击在新选项卡中打开，要使其正常工作，您需要锚标签`

`请不要这样做。它破坏了很多东西，例如链接的右键单击上下文菜单。`

## 答3: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

如果它是您在基本 HTML 锚标记中寻找的按钮的视觉外观，那么您可以使用 Twitter Bootstrap 框架来格式化以下任何常见的 HTML 类型链接/按钮以显示为按钮。请注意框架版本 2、3 或 4 之间的视觉差异：

Link
    Button

Bootstrap (v4) 样品外观：

https://i.stack.imgur.com/ytswI.gif

Bootstrap (v3) 样品外观：

https://i.stack.imgur.com/pXgPr.png

Bootstrap (v2) 样品外观：

https://i.stack.imgur.com/bMTDv.gif

`为单个按钮设置样式似乎有点矫枉过正，不是吗？使用边框、填充、背景和其他 CSS 效果，您可以设置按钮和链接的样式，使其看起来相似，而无需引入整个框架。 Bootstrap 使用的方法很好，但是使用 Bootstrap 似乎过度了。`

## 答4: ##

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

利用：

Click me

不幸的是，这个标记在 HTML5 中不再有效，既不会验证也不会总是按预期工作。使用另一种方法。

`非常感谢你这个简单的答案。`

## 答5: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

从 HTML5 开始，按钮支持 formaction 属性。最重要的是，不需要 JavaScript 或诡计。

转到堆栈溢出！

注意事项

必须被 标签包围。

类型必须是“提交”（或未指定） - 我无法使用“按钮”类型使其工作。这就引出了下面的观点。

覆盖表单中的默认操作。换句话说，如果您在另一个表单中执行此操作，则会导致冲突。

参考：formaction

浏览器支持：: The Button element

`只是为了完整的信息：formaction 自版本 10 及更高版本以来与“IE 世界”兼容`

`@EternalHour 真的很好奇。在您和我提供的示例中，这两种形式的行为之间是否应该存在明显差异？在这种特定情况下， === ？`

`@pseudosavant - 不同之处在于您的答案依赖于Javascript才能工作。在这个解决方案中，不需要 Javascript，它是直接的 HTML。`

`@EternalHour对不起，我应该更清楚。显然 JS 让我的与众不同，但它只是一个渐进式的增强。在没有 JS 的情况下，表单仍会转到该链接。我对我们每个示例中的 HTML 的预期行为感到好奇。 button 上的 formaction 是否应该将 ? 添加到空的 GET 提交中？在此 JSBin 中，两者的 HTML 行为似乎完全相同。`

`需要注意的是，这仅在被表单标签包裹时才有效。好不容易才发现...`

## 答6: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

它实际上非常简单，并且不使用任何表单元素。您可以只使用 标签和里面的按钮:)。

像这样：

Click me !

它会将href加载到同一页面中。想要一个新页面？只需使用 target=“\_blank”。

编辑

几年后，虽然我的解决方案仍然有效，但请记住，您可以使用大量 CSS 让它看起来像您想要的那样。这只是一个快速的方法。

`虽然这可行，但不应将其视为解决方案，而是一种解决方法，因为如果您通过 W3C 验证器传递此代码，您将收到错误。`

`是的，Hyder B. 你是对的，但你也应该记住，标准只是原始指南。作为程序员，您应该始终跳出框框思考并尝试书中没有的东西；）。`

`切勿将其他锚点或表单动作元素包装到 Anchor 中。`

`您应该使用 ... 以便默认情况下它不会用作提交`

`这不是有效的代码有一个很好的理由：可访问性。制表位（例如链接）不应包含制表位（例如按钮），因为辅助技术（屏幕阅读器等）不知道如何将它们呈现给用户。问问自己：哪一个通过 Tab 键获得键盘焦点？哪个应该处理点击事件？因此，除了未能通过 HTML 验证器之外，您还将违反 WCAG，这可能会产生法律后果 - 明智的做法是不要想得太远。`

## 答7: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

如果您使用的是内部表单，请将属性 type=“reset” 与按钮元素一起添加。它将阻止表单操作。

www.example.com

`仅当您希望它重置您的表单时。使用type="button"`

`唯一的问题是内联 JS 被认为是错误的形式，有时会违反 CSP`

## 答8: ##

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

`@Robusto 那是对曾经存在的空白空间的尖刻评论:) 这不是一个好的解决方案 IMO，因为没有 JavaScript 它将无法工作。`

`@Pekka：是的，而且它甚至不是格式良好的 xhtml`

`如果使用表单只使用提交，如果使用 onclick 为什么要打扰表单。 -1`

`它不是格式良好的 HTML。标签 input 没有结束标签。`

`@PeterMortensen 根据 HTML spec，input 元素是一个 void 元素。它必须有一个开始标签，但不能有一个结束标签。`

## 答9: ##

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

这个问题似乎有三种解决方案（各有利弊）。

解决方案 1：表单中的按钮。

Continue

但这样做的问题是，在某些版本的流行浏览器（如 Chrome、Safari 和 Internet Explorer）中，它会在 URL 的末尾添加一个问号字符。因此，换句话说，您的 URL 上方的代码最终将如下所示：

http://someserver/pages2?

有一种方法可以解决这个问题，但它需要服务器端配置。使用 Apache Mod\_rewrite 的一个示例是将带有结尾 ? 的所有请求重定向到不带 ? 的相应 URL。这是一个使用 .htaccess 的示例，但有一个完整的线程 here：

RewriteCond %{
        THE_REQUEST} \?\ HTTP [NC]
    RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能因使用的网络服务器和堆栈而异。所以总结一下这个方法：

优点：

这是一个真正的按钮，从语义上讲它是有意义的。因为它是一个真正的按钮，它也将像一个真正的按钮（例如，可拖动行为和/或在活动时按下空格键时模拟点击）。无需 JavaScript，无需复杂的样式。

缺点：

尾随？在某些浏览器中看起来很难看。这可以通过黑客（在某些情况下）使用 POST 而不是 GET 来解决，但干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于 304 重定向，它将导致对这些链接的额外 HTTP 调用。添加额外的 元素 使用多个表单时的元素定位可能会很棘手，并且在处理响应式设计时会变得更糟。根据元素的顺序，使用此解决方案可能无法实现某些布局。如果设计受到这一挑战的影响，这最终可能会影响可用性。

解决方案 2：使用 JavaScript。

您可以使用 JavaScript 触发 onclick 和其他事件来模拟使用按钮的链接的行为。下面的示例可以改进并从 HTML 中删除，但它只是为了说明这个想法：

Continue

优点：

简单（用于基本要求）并保持语义，同时不需要额外的形式。因为它是一个真正的按钮，它也将像一个真正的按钮（例如，可拖动行为和/或在活动时按下空格键时模拟点击）。

缺点：

需要 JavaScript，这意味着更难访问。这对于链接等基本（核心）元素并不理想。

解决方案 3：锚（链接）样式像按钮。

Styling a link like a button 相对简单，可以在不同的浏览器中提供类似的体验。 Bootstrap 可以做到这一点，但您也可以使用简单的样式轻松实现。

优点：

简单（基本要求）和良好的跨浏览器支持。不需要 即可工作。不需要 JavaScript 即可工作。

缺点：

语义有点坏，因为你想要一个像链接一样的按钮，而不是像按钮一样的链接。它不会重现解决方案\#1 的所有行为。它不支持与按钮相同的行为。例如，链接在拖动时的反应不同。如果没有一些额外的 JavaScript 代码，“空格键”链接触发器也将无法工作。这会增加很多复杂性，因为浏览器在支持按钮上的按键事件方面并不一致。

结论

解决方案＃1（表单中的按钮）对于所需工作最少的用户来说似乎是最透明的。如果您的布局不受此选择的影响并且服务器端调整是可行的，那么对于可访问性是最优先考虑的情况（例如错误页面上的链接或错误消息），这是一个不错的选择。

如果 JavaScript 不是您的可访问性要求的障碍，那么解决方案 \#2 (JavaScript) 将优于 \#1 和 \#3。

如果出于某种原因，可访问性至关重要（JavaScript 不是一个选项），但您的设计和/或服务器配置阻止您使用选项＃1，那么解决方案＃3（锚样式像按钮）是一个很好的替代方案，可以以最小的可用性影响解决这个问题。

## 答10: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

您可以简单地在元素周围放置一个标签：

My Button

https://jsfiddle.net/hj6gob8b/

`不，你不能。 HTML 禁止在 中嵌套 。`

`这与 this answer from years earlier 基本相同。`

`如果它禁止它，那么它为什么会起作用？ :) 没有认真的开发人员会注意 W3C 验证器所说的一切...尝试通过 Facebook 或 Google 或任何大型网站...网络不会等待任何人`

`@UriahsVictor 它今天可能有效，但有一天浏览器供应商可能会决定改变这种行为，因为它是无效的。`

`@UriahsVictor Flash 和 Java 小程序也很常见。`

## 答11: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

只需将您的按钮放在参考标签内，例如，

这似乎对我来说非常有效，并且不会在链接中添加任何 %20 标签，这正是您想要的。我使用了 Google 的链接来演示。

您当然可以将其包装在表单标签中，但这不是必需的。

链接另一个本地文件时，只需将其放在同一个文件夹中并添加文件名作为参考即可。或者如果 in 不在同一个文件夹中，请指定文件的位置。

这也不会在 URL 的末尾添加任何字符，但是在以文件名结尾之前，它确实将文件项目路径作为 URL。例如

如果我的项目结构是…

… 表示文件夹\\

表示一个文件，而四个 |表示父文件夹中的子目录或文件

…公众 |||| …html |||| |||| -main.html |||| |||| -secondary.html

如果我打开文件 main.html，URL 将是，

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。在那里您将拥有自己的端口号。

再者，main.html URL末尾的?\_ijt=xxxxxxxxxxxxxx，x是你自己的连接决定的，所以显然不会等于我的。

看起来我在陈述一些非常基本的观点，但我只想尽可能地解释一下。

原文链接：[https://www.huntsbot.com/qa/Ld5n/how-do-i-create-an-html-button-that-acts-like-a-link?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_Ld5n_how-do-i-create-an-html-button-that-acts-like-a-link_lang_zh_CN_from_csdn]

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

[https_www.huntsbot.com_qa_Ld5n_how-do-i-create-an-html-button-that-acts-like-a-link_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/Ld5n/how-do-i-create-an-html-button-that-acts-like-a-link?lang=zh_CN&from=csdn