Kann ich mit HTML5 ein <button> -Element in einem <a> verschachteln?

Ich mache folgendes:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

Dies funktioniert gut, aber ich erhalte einen HTML5-Validierungsfehler, der besagt, dass "Element 'Schaltfläche' nicht in Element 'a Schaltfläche' verschachtelt sein darf.

Kann mir jemand einen Rat geben, was ich tun soll?

Nein , es ist kein gültiges HTML5 gemäß dem HTML5-Spezifikationsdokument von W3C :

Inhaltsmodell: Transparent , es darf jedoch keinen Nachkommen für interaktive Inhalte geben .

Das a-Element kann um ganze Absätze, Listen, Tabellen usw., sogar ganze Abschnitte, gewickelt werden, solange sich kein interaktiver Inhalt darin befindet (z. B. Schaltflächen oder andere Links).

Mit anderen Worten, Sie können alle Elemente in a verschachteln, mit <a>Ausnahme der folgenden:

• <a>

• <audio>(wenn das Steuerelementattribut vorhanden ist)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(wenn das usemap- Attribut vorhanden ist)

• <input>(wenn sich das type- Attribut nicht im versteckten Zustand befindet)

• <keygen>

• <label>

• <menu>(wenn das Typ - Attribut ist in der Werkzeugleiste Zustand)

• <object>(wenn das usemap- Attribut vorhanden ist)

• <select>

• <textarea>

• <video>(wenn das Steuerelementattribut vorhanden ist)

Wenn Sie versuchen, eine Schaltfläche zu haben, die auf irgendwo verweist, wickeln Sie diese Schaltfläche <form>als solche in ein Tag ein:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

Wenn Ihr <button>Tag jedoch mit CSS gestaltet ist und nicht wie das Widget des Systems aussieht ... Tun Sie sich selbst einen Gefallen, erstellen Sie eine neue Klasse für Ihr <a>Tag und gestalten Sie es auf die gleiche Weise.

Wenn Sie Bootstrap 3 verwenden , funktioniert dies recht gut

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

Nein.

Die folgende Lösung basiert auf JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

Wenn die Schaltfläche in einem vorhandenen <form>mit platziert werden soll method="post", stellen Sie sicher, dass die Schaltfläche das Attribut hat, type="button"andernfalls sendet die Schaltfläche die POST-Operation. Auf diese Weise können Sie eine haben <form>, die eine Mischung aus GET- und POST-Bedientasten enthält.

Ich bin gerade in das gleiche Problem gesprungen und habe es gelöst, indem ich das 'button'-Tag durch das' span'-Tag ersetzt habe. In meinem Fall verwende ich Bootstrap. So sieht es aus:

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

Es wäre wirklich komisch, wenn das gültig wäre, und ich würde erwarten, dass es ungültig ist. Was sollte es bedeuten, ein klickbares Element in einem anderen klickbaren Element zu haben? Was ist das - ein Button oder ein Link?

Eine andere Option ist die Verwendung des onclick-Attributs der Schaltfläche:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

Dies funktioniert jedoch, der Benutzer sieht den Link beim Schweben nicht so, wie wenn er sich innerhalb des Elements befinden würde.

Selbst wenn die Spezifikation dies nicht zulässt, scheint es heutzutage immer noch zu funktionieren, die Schaltfläche in ein <a href...><button ...></a>Tag einzubetten , FWIW ...

Sie können der Schaltfläche eine Klasse hinzufügen und ein Skript einfügen, das sie umleitet.

Ich mache es so:

<button class='buttonClass'>button name</button>

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

Warum nicht? Sie können auch ein Bild auf der Schaltfläche einbetten

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

Erklärung und Arbeitslösung hier: Howto: div mit onclick in einem anderen div mit onclick javascript

indem Sie dieses Skript in Ihrem inneren Klick-Handler ausführen:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

In HTML5 ist es illegal, ein Schaltflächenelement in einen Link einzubetten.

Besser CSS in der Standardeinstellung verwenden und: aktive (gedrückte) Zustände:

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>

Ich probiere Ihre Javascript-Lösungen aus, aber für die Arbeit muss ich die e.preventDefault();in meine Javascript-Funktion einfügen .

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

Verwenden Sie das Formatierungsattribut innerhalb der Schaltfläche

PS! Es funktioniert nur, wenn Ihre Schaltfläche type = "submit"

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