El atributo «autocomplete» de HTML es un atributo de los campos de entrada <input> que permite especificar si un campo debe tener la función de autocompletar activada o desactivada. La función de autocompletar permite a los usuarios llenar un campo de entrada de manera más rápida y sencilla, proporcionando sugerencias basadas en entradas anteriores.
Hay que decir que la función de autocompletar es controlada por el usuario según la configuración que tenga en el navegador web. Si el navegador tiene la función de autocompletar desactivada de manera predeterminada, el atributo «autocomplete» no se tendrá en cuenta.
El atributo «autocomplete» es especialmente útil en formularios web donde el usuario puede llenar los mismos campos varias veces, como un formulario de registro o de inicio de sesión. Al habilitar la función de autocompletar, el cumplimentado de los campos es mucho más rápido, mejorando la experiencia del usuario.
Posibles valores del parámetro autocomplete de HTML
«on«: Activa el autocompletado automático del navegador. Es el navegador quién decide qué información puede ser la más adecuada para ese campo.
«off«: No se permite el autocompletado. ¿Por qué debería interesarnos esta opción? ¿No sería mejor que se completara todo automáticamente? La respuesta es que no siempre interesa. Pongamos el ejemplo de autocompletado de datos sensibles o contraseñas… Para prevenir exponer información confidencial es mejor desactivar esta funcionalidad en algunos casos.
«name«: Nombre completo de la persona.
«honorific-prefix«: El prefijo de cortesía como pueden ser Sra., Sr, Mr, Mrs… Mrs. Miss Maisel
«given-name«: El nombre de pila. — Lisa Simpson
«additional-name«: El nombre del medio. — Homer Jay Simpson
«family-name«: El apellido. — Joey Tribbiani
«honorific-suffix«: Los sufijos como Jr, PhD, IV. — Robert Downey Jr.
«nickname»: El apodo — Lionel Messi «La Pulga«
«email«: El email — miemail@dominio.com
«username«: Nombre de usuario
«new-password«: Se usa como un asistente para crear nuevas contraseñas
«current-password«: Contraseña actual. No sé si es muy seguro pero bueno,…
«one-time-code«: Un código de un solo uso para verificar identidad
«organization-title«: El puesto dentro de una empresa — «Project Manager», «Comercial»…
«organization«: Nombre de empresa. — «Acme Widget company», «Cyberdyne Systems»
«street-address«: Una dirección. — «Rue del Percebe 13 ático primera»
«address-line1«,»address-line2«,»address-line3«: Líneas con texto con partes de la dirección.
«address-level1»: Primer nivel administrativo de la dirección. Suele ser provincia, estado (p.ej en EEUU) ,cantón (Suiza)…
«address-level2«: Segundo nivel administrativo de la dirección. Suele ser ciudad o pueblo
«address-level3«: Tercer nivel administrativo de la dirección. Por si hay un tercer nivel como podría ser el barrio…
«address-level4«: Si se llegan a tener 4 niveles en la dirección. Tal vez demasiado…
«country«: Código ISO del país
«country-name«: Código ISO del país
«cc-name«: Nombre tal como aparece en la tarjeta de crédito.
«cc-given-name«: Nombre de pila tal como aparece en la tarjeta de crédito.
«cc-additional-name«: Segundo nombre tal como aparece en la tarjeta de crédito.
«cc-family-name«: Apellido tal como aparece en la tarjeta de crédito.
«cc-number«: Número de la tarjeta de crédito
«cc-exp«: La fecha de caducidad de la tarjeta de crédito MM/YY o MM/YYYY
«cc-exp-month«: Mes de caducidad de la tarjeta de crédito
«cc-exp-year«: Año de caducidad de la tarjeta de crédito
«cc-csc«: Código de seguridad de la tarjeta de crédito.
«cc-type«: Tipo de tarjeta de pago «Visa» a «Master Card»
«transaction-currency«: Tipo de moneda en la que se realizan los pagos.
«transaction-amount«: Una cantidad que se considerará en la moneda indicada en el campo anterior
«language«: Idioma de preferencia
«bday«: Fecha de nacimiento en formato fecha completa
«bday-day«: Día de la fecha de nacimiento
«bday-month«: Mes de la fecha de nacimiento
«bday-year«: Año de la fecha de nacimiento
«sex«: Identidad de genéro. Femenino, Masculino, Fa’afafine, Hijra, no binario…
«tel«: Número de teléfono completo
«tel-country-code«: Prefijo del país en el número de teléfono
«tel-national«: Teléfono sin el prefijo del país
«tel-area-code«: Código de área dentro del número teléfono
«tel-local»: Teléfono sin prefijos de país ni de área.
«tel-extension«: Extensión telefónica sin el número de teléfono ni ningún código.
«impp«: URL para mensajería
«url«: Una URL en contexto con el resto de campos del formulario
«photo»: La URL de una imagen que representa la información ofrecida en los otros campos del formulario.
«webauthn»: Claves generadas por la Web Authentication API.
Un ejemplo sería el siguiente:
<label for="nombre_usuario">Nombre:</label>
<input type="text" name="nombre_usuario" autocomplete="name">
<label for="username">Usuario:</label>
<input type="username" name="username" autocomplete="username">
<label for="password">Contraseña:</label>
<input type="password" name="password" autocomplete="off">
Los valores normalmente se cumplimentan con información que dispone el navegador, ya sea con valores que ha rellenado el usuario con anterioridad o valores preestablecidos.
Y teniendo en cuenta cosas como esta hacemos más fácil la vida al usuario de nuestras páginas y, de rebote, impactamos positivamente en el ratio de conversión de nuestros formularios.