web-dev-qa-db-fra.com

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

Je fais ce qui suit:

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

Cela fonctionne bien, mais je reçois une erreur de validation HTML5 indiquant 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 devrais faire?

htmlhtml5
109
Marie

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

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

L'élément a peut être entouré de paragraphes, de listes, de tableaux, etc., voire de sections entières, tant qu'il n'y a pas de contenu interactif (par exemple des boutons ou d'autres liens).

En d'autres termes, vous pouvez imbriquer n'importe quel élément dans un <a> à l'exception des éléments 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 dans l'état masqué)

  • <keygen>

  • <label>

  • <menu> (si l'attribut type est dans l'état 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 chose, placez-le dans une balise <form> en tant que tel:

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

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

186
Andrew Moore

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

Je viens juste de sauter dans le même problème et je l'ai résolu en substituant les balises 'button' à '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>
9
gobeltri

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> existant avec method="post", assurez-vous qu'il comporte l'attribut type="button", sinon le bouton soumettra l'opération POST. De cette façon, vous pouvez avoir un <form> contenant une combinaison de boutons d’opération GET et POST.

8
Peter Wilson

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

7
Steve Jorgensen

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

2
rogerdpack

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é en survol comme s'il se trouvait dans l'élément.

2
LaserCat

pourquoi pas .. vous pouvez également incorporer l'image sur le bouton aussi bien

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

Explication et solution de travail ici: Howto: div avec onclick dans une 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();
0
Ruwen

Vous pouvez ajouter une classe au bouton et mettre un script qui le redirige.

Je le fais de cette façon:

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

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