Accesibilidad y usabilidad en formularios web, el atributo autocompletar, autocomplete

El atributo HTML autocompletar permite a los desarrolladores web especificar si el agente de usuario tiene permiso para proporcionar asistencia automatizada en la cumplimentación de los valores de un campo de formulario, así como guiar al navegador en cuanto al tipo de información que se espera en el campo.

Está disponible en elementos <input> que reciben un valor numérico o de texto como entrada, elementos <textarea>, elementos <select> y elementos <form>.

La fuente de los valores sugeridos depende generalmente del navegador; normalmente los valores proceden de valores previos introducidos por el usuario, pero también pueden proceder de valores preconfigurados. Por ejemplo, un navegador puede permitir al usuario guardar su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar.

Si un elemento <input>, <select> o <textarea> no tiene atributo de autocompletado, entonces los navegadores usan el atributo de autocompletado del formulario del elemento, que es el elemento <form> del que el elemento es descendiente, o el <form> cuyo id es especificado por el atributo form del elemento.

Nota: Para que autocomplete funcione, los agentes de usuario pueden requerir que los elementos <input> / <select> / <textarea>:

• Tengan un atributo name y/o id.
• Ser descendientes de un elemento <form>.
• El formulario tenga un botón de envío.

Valores

“off”

No se permite que el navegador introduzca o seleccione automáticamente un valor para este campo. Es posible que el documento o la aplicación ofrezca su propia función de autocompletar, o que por motivos de seguridad sea necesario que el valor del campo no se introduzca automáticamente.

Nota: En la mayoría de los navegadores modernos, desactivar la función de autocompletar no impedirá que un gestor de contraseñas pregunte al usuario si desea guardar la información de su nombre de usuario y contraseña, o que rellene automáticamente esos valores en el formulario de inicio de sesión de un sitio web.

“on”

Se permite al navegador completar automáticamente la entrada. No se proporciona ninguna orientación sobre el tipo de datos que se esperan en el campo, por lo que el navegador puede utilizar su propio criterio.

“name”

El campo espera que el valor sea el nombre completo de una persona. Por lo general, se prefiere utilizar “name” en lugar de desglosar el nombre en sus componentes porque evita tener que tratar con la gran diversidad de nombres humanos y cómo están estructurados; sin embargo, puedes utilizar los siguientes valores de autocomplete si necesitas desglosar el nombre en sus componentes:

• “name”
• “honorific-prefix”
• “given-name”
• “additional-name”
• “family-name”
• “honorific-suffix”
• “nickname”
• “username”
• “new-password”
• “current-password”
• “one-time-code”
• “organization-title”
• “organization”
• “street-address”
• “address-line1”
• “address-line2”
• “address-line3”
• “address-level4”
• “address-level3”
• “address-level2”
• “address-level1”
• “country”
• “country-name”
• “postal-code”
• “cc-name”
• “cc-given-name”
• “cc-additional-name”
• “cc-family-name”
• “cc-number”
• “cc-exp”
• “cc-exp-month”
• “cc-exp-year”
• “cc-csc”
• “cc-type”
• “transaction-currency”
• “transaction-amount”
• “language”
• “bday”
• “bday-day”
• “bday-month”
• “bday-year”
• “sex”
• “url”
• “photo”

Ejemplo:

<label for="firstname">First Name:</label>
<input name="firstname" id="firstname" type="text" autocomplete="given-name" />

<label for="lastname">Last Name:</label>
<input name="lastname" id="lastname" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<input name="email" id="email" type="email" autocomplete="off" />