Skip to main content
Validação HTML

Texto não permitido no elemento “select” neste contexto.

Sobre este problema HTML

Nós de texto diretos dentro de select não são conteúdo permitido. Os navegadores normalmente ignoram ou deformam esse texto, levando a renderização inconsistente e experiências confusas para utilizadores de leitores de ecrã. Também quebra a conformidade, o que pode impactar a manutenibilidade e ferramentas automatizadas. A abordagem correta é manter o texto instrutivo numa label correspondente, ou fornecer um prompt não selecionável usando uma option desativada e selecionada. Rótulos de grupo devem ser fornecidos com elementos optgroup, não texto livre.

Para corrigir, remova qualquer texto em bruto dentro do select. Se precisar de um prompt, adicione uma primeira option com value="" e disabled selected hidden para uma experiência tipo placeholder, ou conte com uma label visível. Certifique-se de que todos os itens selecionáveis estão envolvidos em option, e qualquer agrupamento usa optgroup com o seu atributo label. Sempre associe o select com uma label via for/id para acessibilidade.

Exemplos

Despoleta o erro (nó de texto dentro do select)

<select>
  Please select an option:
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Correto: mover instruções para uma label

<label for="flavor">Please select a flavor:</label>
<select id="flavor" name="flavor">
  <option value="vanilla">Vanilla</option>
  <option value="chocolate">Chocolate</option>
</select>

Correto: fornecer um prompt não selecionável dentro do select

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="" disabled selected hidden>Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Correto: usar optgroup para agrupar, não texto livre

<label for="city">City</label>
<select id="city" name="city">
  <optgroup label="USA">
    <option value="nyc">New York</option>
    <option value="la">Los Angeles</option>
  </optgroup>
  <optgroup label="Canada">
    <option value="toronto">Toronto</option>
    <option value="vancouver">Vancouver</option>
  </optgroup>
</select>

Correto: documento completo (para contexto)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Select without stray text</title>
  </head>
  <body>
    <form>
      <label for="size">Choose a size:</label>
      <select id="size" name="size">
        <option value="" disabled selected hidden>Select a size</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </form>
  </body>
</html>

Dicas:

  • Coloque instruções numa label ou texto envolvente, não dentro do select.
  • Cada escolha deve ser uma option; use optgroup com label para nomear grupos.
  • Para placeholders, prefira uma primeira option desativada e selecionada; evite nós de texto em bruto.

Encontre problemas como este automaticamente

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

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.