我可以使用HTML5将元素嵌在中吗?

I am doing the following:

我正在做以下事情:

 <a href="www.*.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验证错误，它说“元素'按钮'不能嵌套在元素'a按钮'中。”

Can anyone give me advice on what I should do?

有人能给我一些建议吗?

14 个解决方案

#1

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

不，根据W3C的HTML5 Spec文档，它不是有效的HTML5:

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>

  < iframe >

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

  (如果usemap属性存在)

• <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)

  <对象> (如果存在usemap属性)

• <select>

  <选择>

• <textarea>

  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.

但是，如果您的标记是使用CSS样式的，并且看起来不像系统的小部件……帮自己一个忙，为您的< >标记创建一个新类，并以相同的方式对其进行样式化。

#2

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>

#3

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?

如果它是有效的，那就太奇怪了，我想它是无效的。在另一个可点击的元素中包含一个可点击的元素意味着什么?它是一个按钮，还是一个链接?

#4

No.

不。

The following solution relies on JavaScript.

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

<button type="button" onclick="location.href='http://www.*.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.

如果要将按钮放置在现有的

中，方法="post"，则确保按钮具有属性类型="button"，否则按钮将提交post操作。通过这种方式，您可以有一个，其中包含GET和POST操作按钮的混合。

#5

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' tag替换'span' tag。我用的是bootstrap。它是这样的:

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

#6

Another option is to use the onclick attribute of the button:

另一个选项是使用按钮的onclick属性:

<button disabled="disabled" onClick="location.href='www.*.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.

然而，这样做是有效的，用户将不会像在元素内部那样看到悬浮显示的链接。

#7

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...

现在，即使规范不允许它，它“似乎”仍然可以将按钮嵌入到 <按钮…> < / >标记,就其价值而言……

#8

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://*.com";
});
</script>

#9

why not..you can also embeded picture on button as well

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

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

#10

Explanation and working solution here: Howto: div with onclick inside another div with onclick javascript

解释和工作解决方案:Howto: div与onclick在另一个div中使用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();

#11

It is illegal in HTML5 to embed a button element inside a link.

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

Better to use CSS on the default and :active (pressed) states:

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

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.*.com">Click me<a>

#12

I try your javascript solutions but, for work I need to insert the e.preventDefault(); in my javascript function.

我尝试了您的javascript解决方案，但是对于工作，我需要插入e.preventDefault();在我的javascript函数。

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

#13

Use formaction attribute inside the button

在按钮中使用formaction属性

PS! It only works if your button type="submit"

PS !它只在按钮类型="submit"时有效

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

#14

<a href="index.html">
  <button type="button">Submit</button>
</a>

Or you can use java script in button as:

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>