Can I nest a button element inside an a using HTML5?
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.
Can I nest button inside of a
Something like this:
<div class="container">
<a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
Math 141
<ul>
<li><strong>Description</strong> Calculus 1 and Calulus 2</li>
<li><strong>Instructor</strong> Boon Ong</li>
<li><strong>Documents</strong> 17</li>
</ul>
</a>
<button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>
CSS:
.container {
position:relative;
width:400px;
}
.button7 {
width:100%;
height:auto;
display:block;
background:red;
}
.button8 {
position:absolute;
top:5px;
right:5px;
}
Positioning an element absolutely in a parent container with position:relative;
enables you to use the css properties top
, left
, right
, and bottom
relative to the container that encloses it.
Setting the <a>
(with class .button7
) to display:block;
means that the hyperlink will act as a block level element and take up the entire "block" (i.e. space afforded to it by its parent)
http://jsfiddle.net/t29m4/
Can I nest button inside another button?
It is not valid to put a <button>
inside a <button>
element.
In the W3C recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant.
[source: w3.org (emphasis mine)]
Interactive content includes:
- a
- audio (if the controls attribute is present)
- button
- embed
- iframe
- img (if the usemap attribute is present)
- input (if the type attribute is not in the hidden state)
- keygen
- label
- object (if the usemap attribute is present)
- select
- textarea
- video (if the controls attribute is present)
nested div element inside button element to get both links working
If the form submission depends on the paypal transaction success, then submit the form only ater the transaction was approved on the onApprove callback. Something like this:
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
yourForm = document.getElementById('id_of_the_form');
Rails.fire(yourForm, 'submit');
});
}
Can I nest button inside of a
Something like this:
<div class="container">
<a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
Math 141
<ul>
<li><strong>Description</strong> Calculus 1 and Calulus 2</li>
<li><strong>Instructor</strong> Boon Ong</li>
<li><strong>Documents</strong> 17</li>
</ul>
</a>
<button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>
CSS:
.container {
position:relative;
width:400px;
}
.button7 {
width:100%;
height:auto;
display:block;
background:red;
}
.button8 {
position:absolute;
top:5px;
right:5px;
}
Positioning an element absolutely in a parent container with position:relative;
enables you to use the css properties top
, left
, right
, and bottom
relative to the container that encloses it.
Setting the <a>
(with class .button7
) to display:block;
means that the hyperlink will act as a block level element and take up the entire "block" (i.e. space afforded to it by its parent)
http://jsfiddle.net/t29m4/
HTML Button with functional nested input
http://jsfiddle.net/3vtTv/2/
I changed the button to a div
, but still use $("#btn").button()
to style it.
Then I call stopPropagation
on the click event for the #count
click handler.
This seems to work (in IE9, Chrome 10, FF4), but unfortunately the button still flashes when you click the textbox. Not sure how to work around that.
Related Topics
100Vh Height When Address Bar Is Shown - Chrome Mobile
How to Prevent a User from Entering Negative Values in HTML Input
How to Remove Button Style or Overwrite Dynamically Added Classes to Button in Material2
How to Remove the Extra Space in in This Search Box (Between Input Field and Button)
Angular: Using the Ternary Operator in HTML Template
Navbar Menu Dropdown Not Working (Won't Drop Down When Clicked)
Why Am I Seeing a 404 (Not Found) Error Failed to Load Favicon.Ico When Not Using This
How to Avoid Page Break Inside Table Row for Wkhtmltopdf
Splitting the HTML Page Using Div
Text Cutting Inside Large Select Option Dropdown
How to Make Sure This Stays Centered, Even When Zoomed Out or In
Removing Margin from Flex Items When They Wrap
Rendering HTML Content With @Html.Raw in Razor Mail Template
What Is the Order of Precedence For Css