También disponible en: English · Português · Français · العربية
Atributo autocomplete de HTML
El vocabulario completo de autocompletado, un verificador del valor que has escrito y una respuesta precisa a qué promete realmente autocomplete=off.
¿Qué es el atributo autocomplete?
El atributo autocomplete le dice al navegador para qué sirve un campo de formulario, de modo que pueda rellenarlo con lo que ya sabe de quien lo usa. Escribir autocomplete="given-name" en un input es la diferencia entre que el navegador ofrezca el nombre de pila de alguien y que no ofrezca nada.
El vocabulario es más amplio y más estructurado de lo que casi nadie usa. La especificación HTML define 54 nombres de campo, desde los evidentes como email y postal-code hasta cc-exp-month, honorific-suffix, transaction-currency y one-time-code. Junto a ellos hay 10 tokens de pista que matizan un nombre de campo en vez de sustituirlo: shipping, billing, home, work, mobile, fax, pager, un token section de agrupación y los valores sueltos on y off. Y hay exactamente un tipo de credencial, webauthn, que va detrás del nombre del campo y es lo que hace que el navegador ofrezca una passkey.
El orden importa y es fijo: un token section opcional, luego shipping o billing, luego una pista de contacto, luego el nombre del campo y por último el tipo de credencial. Esta página analiza lo que pegues y te dice qué hueco ha ocupado cada token.
Cómo usarla
- Pega el valor que hayas escrito. Solo el valor del atributo, no la etiqueta entera. Los cuatro botones de ejemplo cubren una dirección postal, un inicio de sesión con passkey, un valor con los tokens en el orden equivocado y una errata.
- Mira el grupo de control. Esta es la parte útil. La especificación asigna cada nombre de campo a un tipo de control, y la herramienta te dice cuál es y qué significa en la práctica.
- Revisa los problemas, si los hay. Un token que no existe, una pista fuera de sitio, un nombre de campo que falta o un token section sin nada detrás. Todo esto es silencioso en un navegador: nada te avisa.
El grupo de control es lo que todo el mundo se deja
Busca los valores de autocomplete donde quieras y obtendrás una lista de tokens con una frase de significado cada uno. Lo que eso omite es normativo y de utilidad inmediata: la especificación asigna además cada nombre de campo a un grupo de control, y el grupo te dice en qué clase de input va el token.
El primero que conviene conocer es street-address, que está en el grupo multiline. Está pensado para un textarea, porque una dirección postal no cabe en una línea. Si quieres inputs de una sola línea, lo tuyo es address-line1, address-line2 y address-line3, que están en el grupo de texto. Poner street-address en un input de una línea es el fallo más habitual que esta página puede enseñarte, y ningún navegador te lo va a mencionar.
Los tokens con forma de fecha se reparten igual. bday está en el grupo date y va en un input de tipo date, porque es un año, un mes y un día enteros. bday-day y bday-year están en el grupo numérico: son números sueltos y van en inputs numéricos. cc-exp está en el grupo month, que es un año y un mes juntos, mientras que cc-exp-month es numérico. Cuatro tokens que parecen fechas y tres tipos de control distintos.
Algunos más que sorprenden: one-time-code está en el grupo password, no en el numérico, y es lo que permite al navegador ofrecer un código que acaba de ver llegar. photo e impp están los dos en el grupo url, porque sus valores son direcciones y no nombres. Y cc-number está en el grupo de texto y no en el numérico, ya que un número de tarjeta es una cadena de dígitos y no una cantidad.
Qué promete de verdad autocomplete=off
Menos de lo que sugiere su fama, y conviene ser exactos. La especificación dice que, cuando el nombre de campo de un control es off, el agente de usuario debería no recordar los datos del control ni ofrecer valores anteriores. Es un debería, no un debe. Un navegador que los recuerde de todos modos sigue siendo conforme.
Igual de importante es decir qué no contiene la especificación, porque aquí es donde mucho de lo escrito sobre el tema se pasa de frenada. No hay ninguna cláusula que permita a los navegadores ignorar off en campos de contraseña. La sección no menciona los gestores de contraseñas y no menciona el phishing. El debería es todo lo que hay. Los navegadores se comportan de maneras que la gente describe como ignorar off, y ese comportamiento es real, pero no es algo que el estándar autorice en su texto, así que esta página no afirma que lo haga.
La lectura práctica es sencilla: off es una petición, no un control. Si un valor no debe guardarse, el atributo no es el mecanismo que lo garantiza.
Límites declarados
Esto comprueba un valor, no una página. No puede ver en qué elemento está el atributo, así que puede decirte que street-address va en un textarea pero no que el tuyo está en un input. Esa es justamente la comprobación que más fallos reales pillaría, y necesita tu marcado, no tu valor.
Tampoco puede decirte si el navegador va a rellenar el campo de verdad. El autocompletado depende de lo que el navegador tenga guardado, de heurísticas que varían entre navegadores y del formulario que lo rodea: un atributo correcto hace posible el comportamiento correcto, no seguro.
El vocabulario es una foto fija. La especificación le va añadiendo: webauthn es reciente, y one-time-code es más nuevo que buena parte de lo escrito sobre este atributo. La lista de aquí se genera a partir del estándar en vez de teclearse, lo que hace fácil regenerarla, pero sigue siendo el estándar tal y como está hoy.
Una nota sobre cómo se construyó esa lista, porque afectó a lo que esta página puede afirmar. La tabla de la propia especificación combina celdas en las dos direcciones, con una clase cuyo nombre alude a un sangrado no rectangular, así que no puede leerse por posición, y una lectura posicional produce una tabla que parece correcta y no lo es. Los datos vienen de los anclajes de definición de la especificación, con la extracción contrastada contra tokens cuya respuesta se conocía de antemano.
¿Por qué es gratis?
La lista es estática y el análisis corre en tu navegador. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado lo que escribiste.