que - ¿Puedo anidar un elemento<button> dentro de un<a> usando HTML5?

propiedades button html

Question

Estoy haciendo lo siguiente:

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

Esto funciona bien pero recibo un error de validación de HTML5 que dice "Elemento ''botón'' no debe estar anidado dentro del elemento ''un botón''.

¿Alguien puede darme consejos sobre lo que debería hacer?

Answer 1

¿por qué no ... también puedes incrustar la imagen en el botón?

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

Answer 2

Acabo de lanzarme al mismo problema y lo resolví sustituyendo la etiqueta ''botón'' por ''abarcar''. En mi caso estoy usando bootstrap. Así es como esto luce:

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

Answer 3

En HTML5 es ilegal incluir un elemento de botón dentro de un enlace.

Es mejor usar CSS en los estados por defecto y activo (presionado):

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..com">Click me<a>

Answer 4

En estos días, incluso si la especificación no lo permite, "parece" seguir funcionando para incrustar el botón dentro de una <a href...><button ...></a> , FWIW ...

Answer 5

Explicación y solución de trabajo aquí: Cómo hacer: div con onclick dentro de otra div con onclick javascript

ejecutando esta secuencia de comandos en su controlador de clic interno:

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

Answer 6

Intento tus soluciones de JavaScript pero, para el trabajo, necesito insertar el e.preventDefault(); en mi función 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>   

Answer 7

No.

La siguiente solución depende de JavaScript.

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

Si el botón se va a colocar dentro de un <form> existente con method="post" , entonces asegúrese de que el botón tenga el atributo type="button" contrario, el botón enviará la operación POST. De esta forma, puede tener una <form> que contenga una mezcla de botones de operación GET y POST.

Answer 8

Otra opción es usar el atributo onclick del botón:

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

Esto funciona, sin embargo, el usuario no verá el enlace que se muestra al pasar el mouse como lo haría si estuviera dentro del elemento.

Answer 9

Puede agregar una clase al botón y colocar algún script redirigiéndola.

Lo hago de esta manera:

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

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

Answer 10

Sería realmente extraño si eso fuera válido, y esperaría que fuera inválido. ¿Qué debería significar tener un elemento cliqueable dentro de otro elemento seleccionable? ¿Qué es, un botón o un enlace?

Answer 11

Si está utilizando Bootstrap 3 , esto funciona bastante 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>

Answer 12

Usar el atributo de formacion dentro del botón

¡PD! Solo funciona si el botón type = "submit"

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

Answer 13

No , no es un HTML5 válido según el documento de especificaciones HTML5 del W3C :

Modelo de contenido: Transparent , pero no debe haber descendiente de contenido interactivo .

El elemento a puede envolverse en párrafos, listas, tablas, etc. enteros, incluso secciones enteras, siempre que no haya contenido interactivo dentro (por ejemplo, botones u otros enlaces).

En otras palabras, puede anidar cualquier elemento dentro de un <a> excepto lo siguiente:

• <a>

• <audio> (si el atributo de controles está presente)

• <button>

• <details>

• <embed>

• <iframe>

• <img> (si el atributo usemap está presente)

• <input> (si el atributo de tipo no está en el estado oculto )

• <keygen>

• <label>

• <menu> (si el atributo de tipo está en el estado de la barra de herramientas )

• <object> (si el atributo usemap está presente)

• <select>

• <textarea>

• <video> (si el atributo de controles está presente)

Si intentas tener un botón que enlace a algún lugar, ajusta ese botón dentro de una etiqueta <form> como tal:

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

Sin embargo, si su etiqueta <button> tiene el estilo de CSS y no se ve como el widget del sistema ... Hágase un favor, cree una nueva clase para su etiqueta <a> y péguela de la misma manera.

Answer 14

<a href="index.html">
  <button type="button">Submit</button>
</a>

O puede usar el script java en el botón como:

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>