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

Acerca de este problema HTML

El atributo maxlength proporciona validación integrada del lado del cliente que limita el número de caracteres que un usuario puede escribir en un campo. Los navegadores aplican esto impidiendo más entrada una vez que se alcanza el límite. Sin embargo, este comportamiento solo tiene sentido para tipos de input que aceptan cadenas de texto arbitrarias. Los tipos de input como number, date, range y checkbox tienen sus propios formatos de valor y restricciones — el valor de un input numérico se controla por min, max y step, no por el recuento de caracteres.

Cuando colocas maxlength en un tipo de input no compatible, los navegadores ignorarán el atributo. Esto significa que no proporciona validación real mientras da una falsa sensación de seguridad. También produce HTML inválido, lo que puede causar problemas con tecnologías de asistencia que pueden intentar interpretar el atributo y transmitir información incorrecta a los usuarios. Mantener tu marcado válido asegura un comportamiento predecible entre navegadores y una mejor experiencia para todos los usuarios.

Cómo solucionarlo

Elimina maxlength de cualquier <input> cuyo type no sea email, password, search, tel, text o url.
Usa los atributos de restricción correctos para el tipo de input en cuestión. Para inputs number, usa min y max. Para inputs date, usa min y max con cadenas de fecha.
Si realmente necesitas validación de longitud de caracteres, considera si un tipo de input basado en texto es más apropiado para tu caso de uso, o implementa la restricción en JavaScript.

Ejemplos

❌ Inválido: `maxlength` en un input numérico

<label for="quantity">Cantidad</label>
<input type="number" id="quantity" name="quantity" maxlength="3">

El tipo number no admite maxlength. Los navegadores lo ignorarán, y el HTML es inválido.

✅ Corregido: usando `min` y `max` para un input numérico

<label for="quantity">Cantidad</label>
<input type="number" id="quantity" name="quantity" min="0" max="999">

Si el objetivo era limitar el valor a tres dígitos, min y max son las restricciones correctas.

❌ Inválido: `maxlength` en un input de fecha

<label for="start-date">Fecha de inicio</label>
<input type="date" id="start-date" name="start-date" maxlength="10">

Los inputs de fecha tienen un selector de fecha proporcionado por el navegador, y sus valores están siempre en formato YYYY-MM-DD. El atributo maxlength no tiene efecto aquí.

✅ Corregido: usando `min` y `max` para un input de fecha

<label for="start-date">Fecha de inicio</label>
<input type="date" id="start-date" name="start-date" min="2020-01-01" max="2030-12-31">

❌ Inválido: `maxlength` en un checkbox

<label>
  <input type="checkbox" name="agree" maxlength="1"> Estoy de acuerdo
</label>

Un checkbox es un interruptor booleano — la longitud de caracteres no tiene sentido aquí.

✅ Corregido: eliminando el atributo inválido

<label>
  <input type="checkbox" name="agree"> Estoy de acuerdo
</label>

✅ Válido: `maxlength` en tipos basados en texto compatibles

<label for="username">Nombre de usuario</label>
<input type="text" id="username" name="username" maxlength="30">

<label for="user-email">Email</label>
<input type="email" id="user-email" name="email" maxlength="254">

<label for="user-phone">Teléfono</label>
<input type="tel" id="user-phone" name="phone" maxlength="15">

<label for="site-url">Sitio web</label>
<input type="url" id="site-url" name="website" maxlength="2048">

<label for="user-pass">Contraseña</label>
<input type="password" id="user-pass" name="password" maxlength="128">

<label for="query">Buscar</label>
<input type="search" id="query" name="q" maxlength="100">

Los seis tipos de input admiten maxlength porque aceptan texto de forma libre donde limitar el recuento de caracteres es significativo.