我可以嵌一个<按钮>元素<a>使用HTML5 ?

我正在做以下事情:

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

这工作得很好，但我得到一个HTML5验证错误，说“元素‘按钮’不能嵌套在元素‘按钮’。

谁能给我点建议，我该怎么做?

280669 次浏览
小开
最佳答案

没有，它不是有效的HTML5根据来自W3C的HTML5规范文档:

内容模型: 透明的，但必须没有互动内容后代。

a元素可以被包装在整个段落、列表、表格等等，甚至整个部分中，只要其中没有交互内容(例如按钮或其他链接)。

换句话说，你可以在<a>中嵌套任何元素，除了以下元素:

  • < p > <a>

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

  • < p > <button>

  • < p > <details>

  • < p > <embed>

  • < p > <iframe>

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

  • <input>(如果类型属性不在隐藏的状态)

  • < p > <keygen>

  • < p > <label>

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

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

  • < p > <select>

  • < p > <textarea>

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

如果你试图有一个链接到某处的按钮，将该按钮包装在<form>标记中，如下所示:

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

然而，如果你的<button>标签使用CSS样式，看起来不像系统的小部件…帮你自己一个忙，为你的<a>标记创建一个新类，并以同样的方式设置它的样式。

小开

如果它是有效的，那就太奇怪了，我认为它是无效的。将一个可点击元素置于另一个可点击元素之中意味着什么?是按钮，还是链接?

小开

在按钮内使用formaction属性

PS !只有当你的按钮类型="submit"时它才有效

<button type="submit" formaction="www.youraddress.com">Submit</button>
小开

我刚刚跳进了同样的问题，我解决了它将“按钮”标签替换为“跨度”标签。在我的例子中，我使用的是自举。这是它的样子:

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

另一种选择是使用按钮的onclick属性:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

这是可行的，然而，用户不会看到链接显示在悬停，因为他们会看到它在元素中。

小开

如果你使用的是引导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>
小开

不。

下面的解决方案依赖于JavaScript。

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

如果按钮将被放置在具有method="post"的现有<form>中，则确保按钮具有type="button"属性，否则按钮将提交POST操作。通过这种方式，你可以有一个包含GET和POST操作按钮的<form>。

小开

您可以向按钮添加一个类，并放置一些重定向脚本。

我是这样做的:

<button class='buttonClass'>button name</button>


<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
小开

为什么不..你也可以嵌入图片上的按钮以及

<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>
小开

在HTML5中，在链接中嵌入按钮元素是非法的。

最好在默认和:active(按下)状态下使用CSS:

. 
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>

小开

解释及解决方案: 如何:div与onclick在另一个div与onclick javascript < / p >

通过在你的内部点击处理程序中执行这个脚本:

 if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
小开

现在，即使规范不允许这样做，“似乎”仍然可以将按钮嵌入<a href...><button ...></a>标记中，FWIW…


提交答案