Puis-je imbriquer un élément <button> dans un <a> en utilisant HTML5?

Je fais ce qui suit:

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

Cela fonctionne bien mais j'obtiens une erreur de validation HTML5 qui dit que «l'élément 'bouton' ne doit pas être imbriqué dans l'élément 'un bouton'.

Quelqu'un peut-il me donner des conseils sur ce que je dois faire?

Non , ce n'est pas du HTML5 valide selon le document de spécification HTML5 du W3C :

Modèle de contenu: transparent , mais il ne doit y avoir aucun descendant de contenu interactif .

L'élément a peut être enroulé autour de paragraphes entiers, de listes, de tableaux, et ainsi de suite, même de sections entières, tant qu'il n'y a pas de contenu interactif à l'intérieur (par exemple des boutons ou d'autres liens).

En d'autres termes, vous pouvez imbriquer tous les éléments à l'intérieur d'un, <a>sauf les suivants:

• <a>

• <audio>(si l' attribut contrôles est présent)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(si l' attribut usemap est présent)

• <input>(si l' attribut type n'est pas à l' état masqué )

• <keygen>

• <label>

• <menu>(si l' attribut type est dans l' état de la barre d'outils )

• <object>(si l' attribut usemap est présent)

• <select>

• <textarea>

• <video>(si l' attribut contrôles est présent)

Si vous essayez d'avoir un bouton qui renvoie à quelque part, enveloppez ce bouton dans une <form>balise en tant que telle:

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

Cependant, si votre <button>balise est stylée en utilisant CSS et ne ressemble pas au widget du système ... Faites-vous une faveur, créez une nouvelle classe pour votre <a>balise et stylisez-la de la même manière.

Si vous utilisez Bootstrap 3 , cela fonctionne assez bien

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

Non.

La solution suivante repose sur JavaScript.

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

Si le bouton doit être placé dans un <form>avec existant method="post", assurez-vous que le bouton a l'attribut type="button"sinon le bouton soumettra l'opération POST. De cette façon, vous pouvez avoir un <form>qui contient un mélange de boutons d'opération GET et POST.

Je viens de sauter dans le même problème et je l'ai résolu en remplaçant la balise «bouton» par la balise «span». Dans mon cas, j'utilise bootstrap. C'est à ça que ça ressemble:

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

Ce serait vraiment bizarre si cela était valide, et je m'attendrais à ce que ce soit invalide. Que devrait signifier avoir un élément cliquable à l'intérieur d'un autre élément cliquable? De quoi s'agit-il - un bouton ou un lien?

Une autre option consiste à utiliser l'attribut onclick du bouton:

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

Cela fonctionne, cependant, l'utilisateur ne verra pas le lien affiché au survol comme il le ferait s'il était à l'intérieur de l'élément.

Ces jours-ci, même si la spécification ne le permet pas, il "semble" toujours fonctionner pour intégrer le bouton dans une <a href...><button ...></a>balise, FWIW ...

Vous pouvez ajouter une classe au bouton et mettre un script la redirigeant.

Je le fais de cette façon:

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

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

pourquoi pas..vous pouvez également intégrer une image sur un bouton

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

Explication et solution de travail ici: Howto: div avec onclick dans un autre div avec onclick javascript

en exécutant ce script dans votre gestionnaire de clics interne:

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

Il est illégal en HTML5 d'incorporer un élément de bouton dans un lien.

Mieux vaut utiliser CSS par défaut et: états actifs (pressés):

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>

J'essaye vos solutions javascript mais, pour le travail, je dois insérer le e.preventDefault();dans ma fonction javascript.

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

Utiliser l'attribut formaction à l'intérieur du bouton

PS! Cela ne fonctionne que si votre bouton type = "soumettre"

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