我可以使用HTML5在<a>中嵌套<button>元素吗？

Question

我正在做以下事情:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

这很好,但我得到一个HTML5验证错误,说"元素'按钮'不能嵌套在元素'按钮'中.

谁能给我建议我应该怎么做？

Answer 1

不,根据W3C的HTML5规范文档,它不是有效的HTML5 :

内容模型: 透明,但必须没有交互式内容后代.

只要在其中没有交互式内容(例如按钮或其他链接),a元素可以围绕整个段落,列表,表格等,甚至整个部分.

换句话说,您可以嵌套<a>除以下内容之外的任何元素:

• <a>

• <audio>(如果存在controls属性)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(如果存在usemap属性)

• <input>(如果type属性不处于隐藏状态)

• <keygen>

• <label>

• <menu>(如果type属性处于工具栏状态)

• <object>(如果存在usemap属性)

• <select>

• <textarea>

• <video>(如果存在controls属性)

如果您尝试使用链接到某处的按钮,请将该按钮包含在<form>标记内:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

但是,如果您的<button>标签使用CSS设置样式并且看起来不像系统的小部件...请帮自己一个忙,为您的<a>标签创建一个新类并以相同的方式设置样式.

Answer 2

如果您使用的是Bootstrap 3,则可以正常使用

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Answer 3

我刚刚跳到同样的问题,我用'button'标签代替'span'标签解决了它.在我的情况下,我正在使用bootstrap.这是它的样子:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

Answer 4

没有.

以下解决方案依赖于JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

如果按钮放置内现有的<form>与method="post",则确保按钮具有属性type="button",否则该按钮将提交POST操作.通过这种方式,您可以拥有一个<form>包含GET和POST操作按钮的混合体.

Answer 5

如今，即使规范不允许，“似乎”仍然可以将按钮嵌入到标签中<a href...><button ...></a>，FWIW...

Answer 6

如果这是有效的,那将是非常奇怪的,我希望它是无效的.在另一个可点击元素中有一个可点击元素应该是什么意思？它是什么 - 按钮或链接？