How to Nest a ≪Button≫ Element Inside an ≪A≫ Using Html5

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



Leave a reply



Submit