Html 我可以使用 HTML5 在 <a> 中嵌套 <button> 元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6393827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I nest a <button> element inside an <a> using HTML5?
提问by Marie
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'.
这很好用，但我收到一个 HTML5 验证错误，提示“元素‘按钮’不得嵌套在元素‘按钮’中。
Can anyone give me advice on what I should do?
任何人都可以就我应该做的事情给我建议吗？
回答by Andrew Moore
No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
不，根据W3C的HTML5 规范文档，它不是有效的 HTML5 ：
Content model:Transparent, but there must be no interactive contentdescendant.
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).
内容模型：Transparent，但必须没有交互式内容后代。
a 元素可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）。
In other words, you can nest any elements inside an <a>except the following:
换句话说，您可以在 an 中嵌套任何元素，<a>但以下内容除外：
<a><audio>(if the controlsattribute is present)<button><details><embed><iframe><img>(if the usemapattribute is present)<input>(if the typeattribute is not in the hiddenstate)<keygen><label><menu>(if the typeattribute is in the toolbarstate)<object>(if the usemapattribute is present)<select><textarea><video>(if the controlsattribute is present)
<a><audio>（如果存在控件属性）<button><details><embed><iframe><img>（如果存在usemap属性）<input>（如果type属性不处于隐藏状态）<keygen><label><menu>（如果type属性处于toolbar状态）<object>（如果存在usemap属性）<select><textarea><video>（如果存在控件属性）
If you are trying to have a button that links to somewhere, wrap that button inside a <form>tag as such:
如果您尝试将按钮链接到某处，请将该按钮包装在<form>标签中，如下所示：
<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.
但是，如果您的<button>标签使用 CSS 设置样式并且看起来不像系统的小部件...帮自己一个忙，为您的<a>标签创建一个新类并以相同的方式设置样式。
回答by user2197018
If you're using Bootstrap 3, this works quite well
如果您使用的是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>
回答by Peter Wilson
No.
不。
The following solution relies on JavaScript.
以下解决方案依赖于 JavaScript。
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
If the button is to be placed inside an existing <form>with method="post", then ensure the button has the attribute type="button"otherwise the button will submit the POST operation. In this way you can have a <form>that contains a mixture of GET and POST operation buttons.
如果将按钮放置在现有的<form>with 中method="post"，则确保按钮具有 属性，type="button"否则按钮将提交 POST 操作。通过这种方式，您可以拥有一个<form>包含 GET 和 POST 操作按钮的混合体。
回答by gobeltri
I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:
我刚刚遇到了同样的问题，我解决了将“button”标签替换为“span”标签的问题。就我而言，我正在使用引导程序。这是它的样子：
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>
回答by Steve Jorgensen
It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?
如果这是有效的，那真的很奇怪，我希望它是无效的。在另一个可点击元素中包含一个可点击元素是什么意思？是按钮还是链接？
回答by LaserCat
Another option is to use the onclick attribute of the button:
另一种选择是使用按钮的 onclick 属性：
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
This works, however, the user won't see the link displayed on hover as they would if it were inside the element.
但是，这是有效的，用户不会看到悬停时显示的链接，就像它们在元素内部一样。
回答by rogerdpack
These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a>tag, FWIW...
如今，即使规范不允许，“似乎”仍然可以将按钮嵌入<a href...><button ...></a>标签中，FWIW ......
回答by Ruwen
Explanation and working solution here: Howto: div with onclick inside another div with onclick javascript
这里的解释和工作解决方案： Howto: div with onclick inside another div with onclick javascript
by executing this script in your inner click handler:
通过在您的内部点击处理程序中执行此脚本：
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
回答by divHelper11
You can add a class to the button and put some script redirecting it.
您可以向按钮添加一个类并放置一些重定向它的脚本。
I do it this way:
我这样做：
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
回答by Tapasit Suesasiton
why not..you can also embeded picture on button as well
为什么不......你也可以在按钮上嵌入图片
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>
