El elemento “input” no debe aparecer como descendiente del elemento “a”.

El estándar HTML living define un modelo de contenido para el elemento <a> que excluye explícitamente que el contenido interactivo aparezca como descendiente. El contenido interactivo incluye elementos como <button>, <input>, <select>, <textarea> y otros elementos <a>. Cuando anidas un <input> dentro de un enlace, los navegadores enfrentan una situación ambigua: ¿debería un clic activar el enlace o interactuar con el input? Diferentes navegadores pueden manejar esto de manera diferente, llevando a comportamientos inconsistentes.

Esta restricción también importa para la accesibilidad. Los lectores de pantalla y otras tecnologías asistivas dependen de una estructura DOM clara y predecible. Anidar elementos interactivos crea confusión para los usuarios que navegan con teclados o lectores de pantalla, ya que el orden de foco y el modelo de interacción se vuelven poco claros. Un usuario navegando por la página con tabulación podría no entender que un input vive dentro de un enlace, o podría no ser capaz de interactuar con uno de los dos elementos.

Los escenarios comunes donde surge este problema incluyen envolver un input de búsqueda en un enlace para hacer que toda el área sea clicable, o colocar una casilla de verificación dentro de un enlace para combinar selección con navegación. En todos los casos, la solución es separar los elementos interactivos.

Ejemplos

❌ Incorrecto: <input> dentro de un elemento <a>

<a href="/search">
  <input type="text" placeholder="Search...">
</a>

Esto desencadena el error de validación porque <input> es contenido interactivo anidado dentro de <a>.

✅ Correcto: separa los elementos

<form action="/search">
  <input type="text" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Si el objetivo es navegar a una página de búsqueda, usa un <form> con un atributo action en lugar de envolver el input en un enlace.

❌ Incorrecto: casilla de verificación dentro de un enlace

<a href="/settings">
  <input type="checkbox" id="notify"> Enable notifications
</a>

✅ Correcto: coloca el enlace y el input como hermanos

<label>
  <input type="checkbox" id="notify"> Enable notifications
</label>
<a href="/settings">Go to settings</a>

✅ Correcto: usa estilos para lograr un área clicable

Si quieres un área visualmente combinada donde hacer clic navegue a algún lugar, evita usar un <input> por completo y estiliza el enlace en su lugar:

<a href="/search" class="search-link">
  <span>Search...</span>
</a>

Alternativamente, si necesitas tanto un enlace como un input cerca uno del otro, usa layout CSS para posicionarlos visualmente juntos mientras los mantienes como elementos separados en el marcado:

<div class="search-bar">
  <input type="text" placeholder="Search...">
  <a href="/search">Go</a>
</div>

❌ Incorrecto: input oculto dentro de un enlace

Incluso los inputs ocultos o no visibles desencadenan este error:

<a href="/page">
  <input type="hidden" name="ref" value="home">
  Click here
</a>

✅ Correcto: mueve el input oculto fuera del enlace

<input type="hidden" name="ref" value="home">
<a href="/page">Click here</a>

Si el input oculto está destinado a pasar datos durante la navegación, considera usar parámetros de consulta en el href del enlace en su lugar:

<a href="/page?ref=home">Click here</a>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios