我可以嵌套<按钮>元素在< a>使用HTML5？ [英] Can I nest a <button> element inside an <a> using HTML5?

问题描述

我正在做以下工作：

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

这很好，但我得到一个HTML5验证错误，说Element'按钮'不能嵌套在元素'一个按钮'内。

任何人都可以给我建议我应该做什么？

解决方案

否，根据 W3C的HTML5规范文档： / strong> 透明，但不得有互动内容后裔。

只要内部没有交互式内容（例如按钮或其他链接），a元素可能会缠绕整个段落，列表，表格等等甚至整个部分。

换句话说，您可以将任何元素嵌套在< a> ：

• < a>




• < audio> （如果控件属性存在）




• <按钮>




• < details>




• < embed>




• < iframe>

> < img> （如果 usemap 属性存在） > < input> （如果 type 属性不处于 状态）



• < keygen>




• < label>




• < menu> （如果 type 属性位于工具栏状态）

对象> （如果存在 usemap 属性）



• < select>




• < textarea>




• < video> 控制属性存在）




$ b

如果您尝试使用链接到某处的按钮，请将该按钮封装在< form> 标记中，如下所示：

 < form style =display：inlineaction =http://example.com/method =get> 
<按钮>访问网站< / button> 
< / form> 
  

但是，如果您的<按钮> 标签使用CSS样式，看起来不像系统的小部件...帮你一个忙，为你的< a> 标签创建一个新类，同样的方式。




I am doing the following:

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

This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.

Can anyone give me advice on what I should do?

解决方案

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

In other words, you can nest any elements inside an <a> except the following:

• <a>

• <audio> (if the controls attribute is present)

• <button>

• <details>

• <embed>

• <iframe>

• <img> (if the usemap attribute is present)

• <input> (if the type attribute is not in the hidden state)

• <keygen>

• <label>

• <menu> (if the type attribute is in the toolbar state)

• <object> (if the usemap attribute is present)

• <select>

• <textarea>

• <video> (if the controls attribute is present)

---

If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:

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

However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

这篇关于我可以嵌套<按钮>元素在< a>使用HTML5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！