Verificação HTML: O atributo "placeholder" é apenas permitido quando o tipo de input é "email", "number", "password", "search", "tel", "text", ou "url".

Sobre este problema HTML

O atributo placeholder fornece uma dica breve descrevendo o valor esperado de um campo de input. Esta dica é exibida dentro do controlo como texto claro e esbatido quando o campo está vazio e perde o foco. Apenas faz sentido em tipos de input que apresentam uma área de entrada de texto visível onde o utilizador escreve caracteres diretamente. Tipos de input como checkbox, radio, range, color, file, hidden, date, datetime-local, month, week, time, e image ou não exibem um campo de texto de todo ou usam um widget de UI especializado (como um seletor de datas ou seletor de ficheiros), pelo que o browser não tem onde renderizar o texto placeholder.

Usar placeholder num tipo de input não suportado viola a especificação HTML tal como definida pelo WHATWG. Embora os browsers tipicamente apenas ignorem o atributo inválido, isso sinaliza um provável erro na sua marcação — talvez o tipo de input esteja errado, ou a dica deveria ser comunicada de forma diferente (por exemplo, através de um <label> ou texto adjacente). Manter o seu HTML válido também melhora a manutenibilidade, ajuda as tecnologias assistivas a analisar a sua página corretamente, e previne comportamentos inesperados se futuras versões de browsers lidarem com atributos inválidos de forma diferente.

Vale também a pena notar que mesmo em tipos de input suportados, placeholder não deve ser usado como substituto para <label>. O texto placeholder desaparece assim que o utilizador começa a escrever, o que pode causar problemas de usabilidade e acessibilidade. Sempre associe os seus inputs com um elemento <label> apropriado.

Como corrigir

Remova o atributo placeholder se estiver num tipo de input que não o suporta.
Altere o tipo de input para um que suporte placeholder se o tipo atual estiver incorreto.
Use um <label> ou texto de ajuda visível para comunicar a dica em vez disso, especialmente para tipos de input que não sejam texto.

Exemplos

Inválido: `placeholder` num input hidden

Um input hidden nunca é visível para o utilizador, pelo que um placeholder não serve propósito algum.

<input type="hidden" name="token" placeholder="Session token">

Corrigido: Remova o atributo placeholder.

<input type="hidden" name="token">

Inválido: `placeholder` numa checkbox

Checkboxes não têm uma área de entrada de texto, pelo que não há lugar para o texto placeholder aparecer.

<label>
  <input type="checkbox" name="agree" placeholder="Check to agree"> I agree
</label>

Corrigido: Remova o placeholder e confie no texto do label para comunicar a dica.

<label>
  <input type="checkbox" name="agree"> I agree to the terms
</label>

Inválido: `placeholder` num input de data

Inputs de data usam um widget seletor de datas fornecido pelo browser, não um campo de texto livre.

<label for="birthday">Birthday</label>
<input type="date" id="birthday" name="birthday" placeholder="YYYY-MM-DD">

Corrigido: Remova o placeholder. Se precisar de mostrar uma dica de formato, use um elemento separado.

<label for="birthday">Birthday</label>
<input type="date" id="birthday" name="birthday">
<small>Format: YYYY-MM-DD</small>

Inválido: `placeholder` num input de ficheiro

<label for="upload">Upload</label>
<input type="file" id="upload" name="upload" placeholder="Choose a file">

Corrigido: Remova o placeholder. O browser fornece o seu próprio label para inputs de ficheiro (por exemplo, “No file chosen”).

<label for="upload">Upload</label>
<input type="file" id="upload" name="upload">

Válido: `placeholder` em tipos de input suportados

Estes são todos usos válidos do atributo placeholder:

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com">

<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">

<label for="site">Website</label>
<input type="url" id="site" name="site" placeholder="https://example.com">

<label for="query">Search</label>
<input type="search" id="query" name="query" placeholder="Search articles…">

<label for="qty">Quantity</label>
<input type="number" id="qty" name="qty" placeholder="1">

<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Enter your password">