Skip to main content
Validación HTML

Valor incorrecto “” para el atributo “autocomplete” en el elemento “input”: No debe estar vacío.

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 autocomplete contenga las palabras clave on o off, 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 autocomplete puede interferir con tecnologías asistivas que dependen de estas pistas.
  • Experiencia de usuario: Los tokens específicos de autocompletado como email, tel, street-address, y current-password permiten 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:

  1. Elimina el atributo si quieres el comportamiento por defecto del navegador (el navegador decide si autocompletar).
  2. Usa on para permitir explícitamente el autocompletado.
  3. Usa off para desalentar explícitamente el autocompletado (nota: los navegadores pueden aún autocompletar campos de inicio de sesión independientemente).
  4. 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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.