Can I nest a <button> element inside an <a> using HTML5?
HtmlHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
If you're using Bootstrap 3, this works quite well
<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>
Solution 3 - Html
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:
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>
Solution 4 - Html
No.
The following solution relies on 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.
Solution 5 - Html
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?
Solution 6 - Html
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...
Solution 7 - Html
Another option is to use the onclick attribute of the button:
<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.
Solution 8 - Html
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>
Solution 9 - Html
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>
Solution 10 - Html
Explanation and working solution here: https://stackoverflow.com/questions/2385113/howto-div-with-onclick-inside-another-div-with-onclick-javascript#answer-2385180
by executing this script in your inner click handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Solution 11 - Html
It is illegal in HTML5 to embed a button element inside a link.
Better to use CSS on the default and :active (pressed) states:
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>
Solution 12 - Html
<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>
Solution 13 - Html
Use formaction attribute inside the button
PS! It only works if your button type="submit"
<button type="submit" formaction="www.youraddress.com">Submit</button>