Validación HTML: El atributo "placeholder" solo está permitido cuando el tipo de input es "email", "number", "password", "search", "tel", "text", o "url".

Acerca de este problema HTML

El atributo placeholder proporciona una pista breve que describe el valor esperado de un campo de entrada. Esta pista se muestra dentro del control como texto claro y atenuado cuando el campo está vacío y pierde el foco. Solo tiene sentido en tipos de input que presentan un área de entrada de texto visible donde el usuario escribe caracteres directamente. Los tipos de input como checkbox, radio, range, color, file, hidden, date, datetime-local, month, week, time, e image o no muestran un campo de texto en absoluto o usan un widget de UI especializado (como un selector de fecha o selector de archivos), por lo que el navegador no tiene dónde renderizar el texto del placeholder.

Usar placeholder en un tipo de input no compatible viola la especificación HTML definida por WHATWG. Aunque los navegadores típicamente simplemente ignorarán el atributo inválido, señala un probable error en tu marcado — tal vez el tipo de input sea incorrecto, o la pista debería transmitirse de manera diferente (por ejemplo, a través de un <label> o texto adyacente). Mantener tu HTML válido también mejora la mantenibilidad, ayuda a las tecnologías de asistencia a analizar tu página correctamente, y previene comportamientos inesperados si las versiones futuras del navegador manejan los atributos inválidos de manera diferente.

También vale la pena señalar que incluso en tipos de input compatibles, placeholder no debería usarse como reemplazo de <label>. El texto del placeholder desaparece tan pronto como el usuario comienza a escribir, lo que puede causar problemas de usabilidad y accesibilidad. Siempre empareja tus inputs con un elemento <label> apropiado.

Cómo solucionarlo

Elimina el atributo placeholder si está en un tipo de input que no lo soporta.
Cambia el tipo de input a uno que soporte placeholder si el tipo actual es incorrecto.
Usa un <label> o texto de ayuda visible para transmitir la pista en su lugar, especialmente para tipos de input que no sean de texto.

Ejemplos

Inválido: `placeholder` en un input oculto

Un input hidden nunca es visible para el usuario, por lo que un placeholder no sirve para nada.

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

Corregido: Elimina el atributo placeholder.

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

Inválido: `placeholder` en un checkbox

Los checkboxes no tienen un área de entrada de texto, por lo que no hay lugar donde pueda aparecer el texto del placeholder.

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

Corregido: Elimina el placeholder y depende del texto de la etiqueta para transmitir la pista.

<label>
  <input type="checkbox" name="agree"> Acepto los términos
</label>

Inválido: `placeholder` en un input de fecha

Los inputs de fecha usan un widget selector de fecha proporcionado por el navegador, no un campo de texto libre.

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

Corregido: Elimina el placeholder. Si necesitas mostrar una pista de formato, usa un elemento separado.

<label for="birthday">Fecha de nacimiento</label>
<input type="date" id="birthday" name="birthday">
<small>Formato: YYYY-MM-DD</small>

Inválido: `placeholder` en un input de archivo

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

Corregido: Elimina el placeholder. El navegador proporciona su propia etiqueta para inputs de archivo (por ejemplo, “No file chosen”).

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

Válido: `placeholder` en tipos de input compatibles

Estos son todos usos válidos del 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">