Acerca de este problema HTML
El atributo autocomplete le dice al navegador si debe autocompletar un campo de formulario y cómo hacerlo. El estándar HTML living standard define un conjunto específico de valores permitidos — una cadena vacía no está entre ellos. Cuando el atributo está presente pero vacío, el navegador recibe instrucciones ambiguas: has declarado explícitamente el atributo, señalando intención, pero no has proporcionado ninguna directiva real. Diferentes navegadores pueden interpretar esto de manera inconsistente, algunos tratándolo como on, otros ignorándolo, y otros recurriendo al comportamiento por defecto.
Esto importa por varias razones:
-
Cumplimiento de estándares: La especificación WHATWG HTML requiere que
autocompletecontenga las palabras claveonooff, o uno o más tokens válidos de detalles de autocompletado. Una cadena vacía no satisface ninguno de estos. -
Accesibilidad: El autocompletado ayuda a usuarios con discapacidades motoras o cognitivas a completar formularios más rápida y precisamente. Un valor ambiguo de
autocompletepuede interferir con tecnologías asistivas que dependen de estas pistas. -
Experiencia de usuario: Los tokens específicos de autocompletado como
email,tel,street-address, ycurrent-passwordpermiten a los navegadores y gestores de contraseñas sugerir los datos correctos para el campo correcto. Usarlos correctamente hace que los formularios sean más rápidos y fáciles de completar.
Este problema comúnmente surge cuando un framework o motor de plantillas genera autocomplete="" como valor por defecto, o cuando un desarrollador pretende deshabilitar el autocompletado pero deja el valor en blanco en lugar de usar off.
Cómo solucionarlo
Elige uno de estos enfoques dependiendo de tu intención:
- Elimina el atributo si quieres el comportamiento por defecto del navegador (el navegador decide si autocompletar).
-
Usa
onpara permitir explícitamente el autocompletado. -
Usa
offpara desalentar explícitamente el autocompletado (nota: los navegadores pueden aún autocompletar campos de inicio de sesión independientemente). - Usa un token específico de autocompletado para decirle al navegador exactamente qué tipo de datos espera el campo. Esta es la opción más útil para los usuarios.
Los tokens comunes de autocompletado incluyen: name, given-name, family-name, email, username, new-password, current-password, tel, street-address, postal-code, country, y cc-number. Puedes encontrar la lista completa en la especificación de autocompletado WHATWG.
Ejemplos
Incorrecto: valor de autocomplete vacío
<input type="text" name="username" autocomplete="">
Esto desencadena el error de validación porque el atributo está presente pero no contiene ningún token válido.
Correcto: eliminar el atributo completamente
Si no tienes ninguna preferencia específica de autocompletado, simplemente omite el atributo:
<input type="text" name="username">
Correcto: usar on o off
Habilitar o deshabilitar explícitamente el autocompletado:
<input type="text" name="username" autocomplete="on">
<input type="text" name="search-query" autocomplete="off">
Correcto: usar tokens específicos de autocompletado
Los tokens específicos dan a los navegadores las mejores pistas para rellenar los datos correctos. Este es el enfoque recomendado para formularios que recopilan información personal:
<form>
<label for="name">Nombre completo</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="useremail">Email</label>
<input type="email" id="useremail" name="useremail" autocomplete="email">
<label for="phone">Teléfono</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
<label for="pwd">Contraseña</label>
<input type="password" id="pwd" name="pwd" autocomplete="current-password">
<button type="submit">Iniciar sesión</button>
</form>
Usar tokens precisos como current-password y email ayuda a los gestores de contraseñas y teclados móviles a proporcionar las sugerencias más relevantes, mejorando la experiencia para todos los usuarios.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.