Atributo HTML Autocomplete
Aprende el atributo HTML autocomplete: valores on y off, tokens como email y new-password, con notas de seguridad y accesibilidad.
El atributo autocomplete controla si el navegador puede rellenar automáticamente un campo de formulario para el usuario. Cuando está habilitado y el usuario empieza a escribir, el navegador sugiere valores guardados de envíos anteriores (nombres, correos electrónicos, direcciones, etc.) para que el campo se pueda completar con un toque o clic.
Esta página cubre los dos valores básicos (on y off), los tokens de autorrelleno con nombre que indican al navegador exactamente qué tipo de dato contiene un campo, cuándo conviene desactivar el autocompletado y las implicaciones de seguridad y accesibilidad.
Nota: El atributo autocomplete funciona con los tipos de <input> como text, search, tel, url, password, email, range y color.
Sintaxis
Sintaxis del atributo HTML Autocomplete
<input autocomplete="on|off">También puedes usar un token con nombre en lugar de on/off para describir el propósito exacto del campo:
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| Se aplica a | Elementos <form> e <input>. |
|---|
Ejemplo del atributo HTML autocomplete:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Ejemplo de la etiqueta HTML <form> con el atributo autocomplete activado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" autocomplete="on">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" />
<input type="submit" value="Send" />
</form>
</body>
</html>Uso de tokens de autorrelleno con nombre
En lugar de simplemente on u off, puedes asignar a cada campo un token que describa qué tipo de valor contiene. El navegador ofrece entonces los datos guardados correctos (el correo del usuario, su dirección de envío, una contraseña nueva que puede generar, etc.). Los tokens con nombre hacen que el autorrelleno sea mucho más preciso que un on genérico.
El ejemplo siguiente combina un formulario de dirección con una sección de inicio de sesión. Observa autocomplete="email" para el campo de correo y autocomplete="new-password" para la contraseña de registro, que indica al navegador que sugiera una contraseña recién generada en lugar de una existente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Tokens de autorrelleno más comunes
El estándar HTML define más de 50 tokens de autorrelleno. La tabla siguiente enumera los que usarás con más frecuencia. Para la lista completa y oficial, consulta la especificación de autorrelleno de WHATWG.
| Token | Propósito del campo |
|---|---|
name | Nombre completo |
given-name | Nombre de pila |
family-name | Apellido |
nickname | Apodo o nombre de pantalla |
username | Nombre de usuario de la cuenta |
email | Dirección de correo electrónico |
tel | Número de teléfono completo |
street-address | Dirección completa (multilínea) |
address-line1 | Primera línea de la dirección |
address-line2 | Segunda línea (apartamento, suite) |
address-level2 | Ciudad o localidad |
address-level1 | Estado, provincia o región |
postal-code | Código postal |
country | Código de país (p. ej. US) |
country-name | Nombre del país |
cc-name | Nombre impreso en la tarjeta de pago |
cc-number | Número de la tarjeta de pago |
cc-exp | Fecha de caducidad de la tarjeta |
cc-csc | Código de seguridad de la tarjeta (CVC/CVV) |
current-password | Contraseña existente (para iniciar sesión) |
new-password | Contraseña nueva (para registro o cambio) |
one-time-code | Código de verificación de un solo uso (OTP) |
bday | Fecha de nacimiento completa |
Cuándo (y por qué) desactivar el autocompletado
La mayor parte del tiempo debes dejar el autocompletado habilitado, ya que ahorra escritura y reduce errores. Hay algunos motivos legítimos para desactivarlo:
- Códigos de un solo uso y datos sensibles. Los campos para contraseñas de un solo uso, respuestas de CAPTCHA u otros valores que nunca deben recordarse son buenos candidatos. Para un campo OTP, prefiere
autocomplete="one-time-code"en lugar deoff, para que los dispositivos móviles puedan seguir sugiriendo el código de un SMS sin guardarlo de forma permanente. - Interfaz de autorrelleno personalizada. Si tu aplicación proporciona su propio desplegable de sugerencias (por ejemplo, una búsqueda de ciudad o producto respaldada por
<datalist>o un widget JavaScript), el autorrelleno nativo del navegador puede interferir, por lo que puede que lo desactives. - Dispositivos compartidos o de quiosco, privacidad. En terminales públicos puede que no quieras que el navegador retenga o rellene datos personales para el siguiente usuario.
Atención: autocomplete="off" es solo una sugerencia. Para los campos de contraseña, Chrome y Safari a menudo lo ignoran para que sus gestores de contraseñas integrados sigan funcionando, lo que se considera una medida de seguridad. Para evitar que el navegador sugiera una contraseña guardada existente, usa autocomplete="new-password" en el campo correspondiente en lugar de off.
Nota de seguridad: desactivar el autocompletado no hace que un formulario sea más seguro. Los datos guardados siguen residiendo en el gestor de contraseñas del navegador, y obligar a los usuarios a escribir contraseñas largas a mano fomenta el uso de contraseñas débiles y reutilizadas. El patrón más seguro es etiquetar los campos con los tokens correctos (current-password, new-password, one-time-code) para que los gestores de contraseñas y el navegador gestionen los datos de forma sensata.
Accesibilidad y UX
Los tokens de autorrelleno con nombre son una característica de accesibilidad, no solo una comodidad:
- Satisfacen el Criterio de Éxito 1.3.5 de WCAG 2.1 "Identificar el propósito de entrada," que exige que el propósito de los campos de formulario comunes sea identificable programáticamente.
- Permiten que los gestores de contraseñas rellenen credenciales de forma fiable y que los navegadores móviles muestren el teclado en pantalla adecuado.
- Desactivar el autocompletado puede ser una barrera para usuarios con discapacidades cognitivas, dificultades motoras o de memoria, que dependen de los valores guardados para completar formularios. Desactívalo solo cuando haya una razón real para hacerlo.
Relacionado: autofocus mueve el cursor a un campo al cargar la página, y el capítulo de <input> cubre los tipos de campo con los que se combinan estos tokens.