制作按钮 - <button> 还是 <div>？答案

【问题标题】：Making buttons - <button> or <div>?制作按钮 - <button> 还是 <div>？
【发布时间】：2011-02-16 03:53:33
【问题描述】：

我想知道要为网页上的按钮使用什么 html 元素 - 我想像 twitter 那样设置我的“按钮”的样式。例如：

推文列表底部的“更多”按钮 - 是 <button> 元素还是 <div> 元素？我想知道使用哪个。我认为对于<button> 或<div>，我们可以提供翻转状态和所有这些东西来让它看起来很愉快？

【问题讨论】：

我认为这不适合您提出问题：SO FAQ：“Web design and HTML/CSS layout, and your job title is 'designer', ask on Doctype.”
更多按钮是一个带有链接的div。如果您使用的是 firefox，则可以使用 firebug 轻松找到这些东西。我强烈推荐它。网络开发人员也可以添加。
另外，如果您在分辨特定元素是什么时遇到问题，请获取 Firebug for Firefox。在完成之前不要再做一点 CSS 工作。你会很开心的。（反正我觉得）
根据 Firebug，这是一个<a>。 i132.photobucket.com/albums/q1/MiffTheFox/twitter_more_link.png
如果

标签： html

【解决方案1】：

不要使用<div> 标签来制作可点击的元素。使用<a> 或<button> 元素。这使得禁用 JavaScript 的浏览器能够按预期与它们交互。即使您的功能需要 JavaScript 并且没有可以分配给 <a> 的合理默认行为，也无论如何都要使用它 - 它传达了“可点击”语义。

一般来说，选择最能描述其内容的功能的标签，而不是其内容的外观，并避免不必要的<div>标签，以免您的文档受到divitis的影响。

【讨论】：

众所周知，按钮在跨浏览器中的样式/定位比 div 更难。另外，如果“按钮”只是触发了一些 JS，那么我看不出它是 div 的问题。
@UpTheCreek A <div> 不会向屏幕阅读器传达可点击性，也不会向文档添加语义价值。它们基本上是无法访问的。至少你应该使用<a> 标签，它们的样式和<div> 标签一样，但带有可点击的语义。为可点击的 UI 元素选择 <div> 和 <a> 从来没有充分的理由。
@UpTheCreek 我使用vimium 来“点击”链接。它不适用于 div 点击。拥有一个锚并不会消除你任何风格的可能性（display:block，它的行为就像一个 div）并且它增加了语义。
如 MSO 中所述...不是这种情况吗：在其他“可点击”元素中以列表形式语义包含交互式（“可点击”）元素 - 在这种情况下，ul在单击a 元素（小齿轮图标）后呈现可点击的li 元素——完全未实现的菜单元素的主要动机（现在正在HTML 5.1 草案中采用）？ w3.org/TR/html51/semantics.html#the-menu-element
使用<a>。按钮不是解决方案。示例：您有一个包含<button>add new line</button> 和<button>submit</button> 的表单。当您按 Enter 时，您会触发添加新行而不是提交。当我按 Enter 时，我希望提交。

【解决方案2】：

Twitter 上的“更多”按钮是一个<a>，带有背景图片、CSS3 圆角和边框。这是完整的 CSS（元素是 <a class="more round">）：

 .more {
      outline: none;
      display: block;
      width: 100%;
      padding: 6px 0;
      text-align: center;
      border: 1px solid #ddd;
      border-bottom: 1px solid #aaa;
      border-right: 1px solid #aaa;
      background-color: #fff;
      background-repeat: repeat-x;
      background-position: left top;
      font-size: 14px;
      text-shadow: 1px 1px 1px #fff;
      font-weight: bold;
      height: 22px;
      line-height: 1.5em;
      margin-bottom: 6px;
      background-image: url('/images/more.gif');
    }
    
    .more:hover {
      border: 1px solid #bbb;
      text-decoration: none;
      background-position: left -78px;
    }
    
    .more:active {
      color: #666;
      background-position: left -38px;
    }
    
    .round {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }

&lt;a href="#" class="more round"&gt;Sample Button&lt;/a&gt;

您应该使用<a> 或<button>，而不是<div>。

【讨论】：

具有 href 属性的锚点将触发页面重新加载。没有href，它就不是“可表格的”，它仍然不带有按钮语义。 <a role="button" tabindex="0"></a> 做到了这一切。

【解决方案3】：

一般来说，您希望使用<a> 进行导航，使用<button> 进行在该屏幕上发生的某些操作。

我能想到的最好的理由是更喜欢<button> 或<a> 标签而不是<anything-else> 是在测试期间，它可以更容易地找到可操作的项目。例如，我使用Capybara and Rspec，而click_on 方法在引用<button> 时工作得更可靠，与click_link 和<a> 方法相同。

这里给出的其他原因也很好：语义、屏幕阅读器等。

务实地，您的受众将决定您页面上的每个元素是否真的很花哨<div>，或者您是否想与网络开发生态系统的其他部分配合得很好。这可能仅取决于您的受众是否都使用 X 浏览器。

一个问题：由于<button> 可以提交表单或<a> 将您带到另一个页面，因此您必须确保阻止这些默认操作。在处理点击的 JavaScript 函数中，您必须指定它只执行您编写的操作。

function onClickEvent(e)
{
  e.preventDefault();
  // What you want to do instead
}

【讨论】：

【解决方案4】：

使用a 标签代替button。我的推理涉及与旧版本 IE 的兼容性问题（IE6 讨厌 button 标签）。

<button> vs. <input type="button" />. Which to use?

【讨论】：

IE6 必须死掉，Web 才能继续前进。不要将与 IE6 的兼容性作为选择 html 设计的理由。 ie6nomore.com
是的，但通常输入和按钮元素在引用 css 样式时总是存在一致性问题。
尤其是现在，利大于弊

【解决方案5】：

我建议 <input id="Button1" type="button" value="button" /> 使用 css 样式来呈现您正在寻找的外观。

【讨论】：

这是非常糟糕的做法，除非在非常特殊的情况下