O elemento “input” não deve aparecer como descendente do elemento “a”.

O padrão HTML living standard define um modelo de conteúdo para o elemento <a> que exclui explicitamente conteúdo interativo de aparecer como descendente. Conteúdo interativo inclui elementos como <button>, <input>, <select>, <textarea>, e outros elementos <a>. Quando aninha um <input> dentro de uma ligação, os navegadores enfrentam uma situação ambígua: deve um clique ativar a ligação ou interagir com o input? Diferentes navegadores podem lidar com isto de forma diferente, levando a comportamentos inconsistentes.

Esta restrição também é importante para a acessibilidade. Leitores de ecrã e outras tecnologias assistivas dependem de uma estrutura DOM clara e previsível. Aninhar elementos interativos cria confusão para utilizadores que navegam com teclados ou leitores de ecrã, pois a ordem de foco e modelo de interação tornam-se pouco claros. Um utilizador navegando pela página com a tecla tab pode não compreender que um input vive dentro de uma ligação, ou pode ser incapaz de interagir com um dos dois elementos.

Cenários comuns onde este problema surge incluem envolver um input de pesquisa numa ligação para tornar toda a área clicável, ou colocar uma checkbox dentro de uma ligação para combinar seleção com navegação. Em todos os casos, a solução é separar os elementos interativos.

Exemplos

❌ Incorreto: <input> dentro de um elemento <a>

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

Isto desencadeia o erro de validação porque <input> é conteúdo interativo aninhado dentro de <a>.

✅ Correto: Separe os elementos

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

Se o objetivo é navegar para uma página de pesquisa, use um <form> com um atributo action em vez de envolver o input numa ligação.

❌ Incorreto: Checkbox dentro de uma ligação

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

✅ Correto: Coloque a ligação e input como irmãos

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

✅ Correto: Use estilos para alcançar uma área clicável

Se quer uma área visualmente combinada onde clicar navega para algum lugar, evite usar um <input> completamente e estilize a ligação em vez disso:

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

Alternativamente, se precisa tanto de uma ligação como de um input perto um do outro, use layout CSS para os posicionar visualmente juntos mantendo-os como elementos separados na marcação:

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

❌ Incorreto: Input oculto dentro de uma ligação

Mesmo inputs ocultos ou não-visíveis desencadeiam este erro:

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

✅ Correto: Mova o input oculto para fora da ligação

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

Se o input oculto pretende passar dados durante a navegação, considere usar parâmetros de consulta no href da ligação em vez disso:

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

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços