blocks|key|646809|text|我刚刚也遇到了同样的问题，我解决了这个问题，将“button”标签替换为“span”标签。在我的例子中，我使用的是bootstrap。它看起来是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646810|<a+href="#register">+
++++<span+class="btn+btn-default+btn-lg">
++++++++Subscribe
++++</span>
</a>+|code-block|syntax|javascript|646811|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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:</p>

<pre><code>&lt;a href="#register"&gt; 
    &lt;span class="btn btn-default btn-lg"&gt;
        Subscribe
    &lt;/span&gt;
&lt;/a&gt; 
</code></pre>


blocks|key|646938|text|不是的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646939|以下解决方案依赖于JavaScript。|646940|<button+type="button"+onclick="location.href='http://www.stackoverflow.com'">ABC</button>|code-block|syntax|javascript|646941|如果要将按钮放置在具有method="post"的现有<form>中，则确保该按钮具有type="button"属性，否则该按钮将提交POST操作。这样，您就可以拥有一个混合了GET和POST操作按钮的<form>。|offset|length|style|CODE|646942|entityMap^0|0|0|0|B|D|R|6|17|D|2T|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

<p>No.</p>

<p>The following solution relies on JavaScript.</p>

<pre><code>&lt;button type="button" onclick="location.href='http://www.stackoverflow.com'"&gt;ABC&lt;/button&gt;
</code></pre>

<p>If the button is to be placed inside an existing <code>&lt;form&gt;</code> with <code>method="post"</code>, then ensure the button has the attribute <code>type="button"</code> otherwise the button will submit the POST operation. In this way you can have a <code>&lt;form&gt;</code> that contains a mixture of GET and POST operation buttons.</p>


blocks|key|646679|text|如果这是有效的，那将是非常奇怪的，而我希望它是无效的。在另一个可点击的元素中有一个可点击的元素意味着什么？它是一个按钮，还是一个链接？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646680|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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?</p>


blocks|key|864476|text|这些天来，即使规范不允许，它“似乎”仍然可以将按钮嵌入到<a+href...><button+...></a>标记中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|864477|entityMap^0|S|R|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <code>&lt;a href...&gt;&lt;button ...&gt;&lt;/a&gt;</code> tag, FWIW...</p>


blocks|key|646881|text|另一种选择是使用按钮的onclick属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646882|<button+disabled="disabled"+onClick="location.href='www.stackoverflow.com'"+>ABC</button>|code-block|syntax|javascript|646883|这是有效的，然而，用户将不会看到悬停时显示的链接，因为它是在元素内部。|646884|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Another option is to use the onclick attribute of the button:</p>

<pre><code>&lt;button disabled="disabled" onClick="location.href='www.stackoverflow.com'" &gt;ABC&lt;/button&gt;
</code></pre>

<p>This works, however, the user won't see the link displayed on hover as they would if it were inside the  element.</p>


blocks|key|646970|text|您可以向按钮添加一个类，并放置一些脚本来重定向它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646971|我这样做：|646972|<button+class='buttonClass'>button+name</button>

<script>
$(".buttonClass').click(function(){
window.location.href+=+"http://stackoverflow.com";
});
</script>|code-block|syntax|javascript|646973|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can add a class to the button and put some script redirecting it.</p>

<p>I do it this way:</p>

<pre><code>&lt;button class='buttonClass'&gt;button name&lt;/button&gt;

&lt;script&gt;
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
&lt;/script&gt;
</code></pre>


blocks|key|647007|text|为什么not..you也可以在按钮上嵌入图片|type|unstyled|depth|inlineStyleRanges|entityRanges|data|647008|<FORM+method+=+"POST"+action+=+"https://stackoverflow.com">+
++++<button+type="submit"+name="Submit">
++++++++<img+src="img/Att_hack.png"+alt="Text">
++++</button>
</FORM>+|code-block|syntax|javascript|647009|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>why not..you can also embeded picture on button as well</p>

<pre><code>&lt;FORM method = "POST" action = "https://stackoverflow.com"&gt; 
    &lt;button type="submit" name="Submit"&gt;
        &lt;img src="img/Att_hack.png" alt="Text"&gt;
    &lt;/button&gt;
&lt;/FORM&gt; 
</code></pre>


blocks|key|647149|text|解释和工作解决方案：Howto:+div+with+onclick+inside+another+div+with+onclick+javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|647150|通过在内部单击处理程序中执行此脚本：|647151|+if+(!e)+var+e+=+window.event;
+e.cancelBubble+=+true;
+if+(e.stopPropagation)+e.stopPropagation();|code-block|syntax|javascript|647152|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2385113/howto-div-with-onclick-inside-another-div-with-onclick-javascript#answer-2385180^0|A|1U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Explanation and working solution here: 
<a href="https://stackoverflow.com/questions/2385113/howto-div-with-onclick-inside-another-div-with-onclick-javascript#answer-2385180">Howto: div with onclick inside another div with onclick javascript</a></p>

<p>by executing this script in your inner click handler:</p>

<pre><code> if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();
</code></pre>


blocks|key|864358|text|在HTML5中，在链接中嵌入按钮元素是非法的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864359|最好在default和:active+(按下)状态下使用CSS：|864360|​|864361|body{background-color:#F0F0F0}+/*+JUST+TO+MAKE+THE+BORDER+STAND+OUT+*/
a.Button{padding:.1em+.4em;color:#0000D0;background-color:#E0E0E0;font:normal+80%25+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}|code-block|syntax|javascript|864362|<p><a+class="Button"+href="www.stackoverflow.com">Click+me<a>|864363|864364|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>It is illegal in HTML5 to embed a button element inside a link.</p>

<p>Better to use CSS on the default and :active (pressed) states:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;a class="Button" href="www.stackoverflow.com"&gt;Click me&lt;a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|647043|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|647044|<a+href="index.html">
++<button+type="button">Submit</button>
</a>|code-block|syntax|javascript|647045|或者您可以在按钮中使用java脚本，如下所示：|647046|647047|647048|<button+type="submit"+onclick="myFunction()">Submit</button>
<script>
++function+myFunction()+{
++++++var+w+=+window.open(file:///E:/Aditya%2520panchal/index.html);
++++}
</script>|647049|647050|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="index.html"&gt;
  &lt;button type="button"&gt;Submit&lt;/button&gt;
&lt;/a&gt;</code></pre>
</div>
</div>

Or you can use java script in button as:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="submit" onclick="myFunction()"&gt;Submit&lt;/button&gt;
&lt;script&gt;
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|646723|text|在按钮内部使用formaction属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|646724|又来了！只有当你的按钮type=为“submit”时，它才有效。|646725|<button+type="submit"+formaction="www.youraddress.com">Submit</button>|code-block|syntax|javascript|646726|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Use formaction attribute inside the button</p>

<p>PS! It only works if your button type="submit"</p>

<pre><code>&lt;button type="submit" formaction="www.youraddress.com"&gt;Submit&lt;/button&gt;
</code></pre>


<p>I am doing the following:</p>

<pre><code> &lt;a href="www.stackoverflow.com"&gt;
   &lt;button disabled="disabled" &gt;ABC&lt;/button&gt;
 &lt;/a&gt;  
</code></pre>

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

<p>Can anyone give me advice on what I should do?</p>


Can I nest a <button> element inside an <a> using HTML5?

HTML5

我正在做以下工作： <a href="www.stackoverflow.com">   <button disabled="disabled" >ABC</button> </a>  这很好用，但我得到了一个HTML5验证错误，指出“元素'button‘不能嵌套在元素'a button’中。”有人能给我一些建议吗?我该怎么做？

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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