web-dev-qa-db-fra.com

Puis-je imbriquer un bouton dans un autre bouton?

Ceci est un problème résultant de l’essai de garder ma sémantique HTML aussi correcte que possible.

J'ai un bouton parent qui remplit à la fois une fonction dans la même page et agit en tant que balise parent pour un gros conteneur imbriqué dans une ancre (qui redirige vers une autre page) et une balise div servant également de parent pour un autre bouton. c'est supposé effectuer certaines actions.

<button>
  <div id="the-most-big-container"
    <a href="http://www.RedirectMeToAnotherPage.com"></a>
   <div>
     <button> do some action </button>
   </div>
  </div>
</button>

J'ai essayé d'imbriquer le bouton, lui ai donné une classe et un identifiant, et aucune des propriétés que j'applique à la classe et l'identifiant ne sont exécutés sur le bouton enfant. En outre, le bouton enfant est complètement sorti du grand conteneur et se pose dans le DOM, comme s'il s'agissait d'une balise indépendante complète non imbriquée par une autre balise. 

[Mettre à jour]

Apparemment, il est interdit d'imbriquer un bouton dans un autre, mais j'aimerais en outre une explication sur le fait que le comportement du bouton imbriqué ne réagit pas aux styles CSS, et comment il se pose exactement sur le DOM, est-il maintenant complètement indépendant? tag par lui-même ou quoi?

De plus, je serai obligé de changer la balise du bouton parent en une autre balise pour pouvoir imbriquer des boutons enfants à l'intérieur. Je voudrais une suggestion pour une balise de substitution pour la balise du bouton parent Ex: je pourrais changer le bouton parent en une balise div, 

mais j’ai besoin d’une balise qui soit plus descriptive sémantiquement (autre chose qu’un div), j’avais ce bouton parent en premier lieu pour faire office de bouton bascule de sorte que lorsque je clique dessus, il affiche et cache le plus gros conteneur-div.

htmlcsshtml5css3button
7
AndrewMk

Il n'est pas valide de mettre un <button> dans un élément <button>.
Dans la recommandation WC3 pour l’élément button, vous pouvez lire:

Modèle de contenu:
Phrasing contenu, mais il ne doit pas y avoir de descendant de contenu interactif. [source: w3.org ]

Contenu interactif comprend:

  • une 
  • audio (si l'attribut controls est présent) 
  • bouton 
  • intégrer 
  • iframe 
  • img (si l'attribut usemap est présent) 
  • input (si l'attribut type n'est pas à l'état caché) 
  • keygen 
  • étiquette 
  • objet (si l'attribut usemap est présent) 
  • sélectionner 
  • textarea 
  • video (si l'attribut controls est présent)
7
web-tiki

Tu ne peux pas faire ça. Un bouton n'est pas destiné à contenir d'autres éléments . Cependant, vous pouvez styler un élément div pour lui donner l'aspect et la convivialité d'un bouton, voici à quoi il ressemble avec bootstrap:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="btn btn-default">
        outer button
        <br />

        <button class="btn btn-primary">
            inner button
        </button>
    </div>
</body>
</html>

0
Bender