HTML 链接,或按钮,即问题 / Marijke Luttekes

主要观点:HTML 链接和按钮不可互换,需正确使用它们。链接用于在当前文档或不同文档间导航,按钮用于特定动作如提交表单等。
关键信息:

  • 锚点(链接)用于当前文档内或到其他文档的导航。
  • 专用“提交”和“重置”按钮用于特定表单动作。
  • 常规按钮用于(JavaScript)动作。
  • 可通过 CSS 使链接和按钮外观相似,但仍有细微差别。
    重要细节:
  • MDN 定义:<a>元素创建超链接,<button>元素由用户激活执行动作,默认外观可通过 CSS 改变。
  • 导航示例:链接到当前域内/外页面、当前页特定元素、发送邮件、打开其他应用资源等。动作示例:提交表单、预填表单、打开/关闭对话框等。
  • 表单中有两种非通用按钮:提交按钮和重置按钮,还有通用按钮<button type="button">用于 JavaScript 魔法,可添加click等事件监听器。
  • 若有链接和按钮混合,可通过 CSS 使其外观相近,同时应关注其 accessibility 相关内容。
  • 进一步阅读可参考 Adrian Roselli 和 Heydon Pickering 的文章。
  • 原始 toot 强调正确使用链接和按钮,否则可能导致无法在新标签页打开等问题。
阅读 17
0 条评论