Otra de las características que acompañan a HTML 5 es el autocompletado de campos de un formulario. Muchos de nosotros lo hemos utilizado sin tener conocimiento de ello, pero es cierto que el atributo autocomplete pretende ir más allá de un simple on/off.
¿Cómo funciona?
La primera vez que rellenamos un formulario, los navegadores almacenan esta información, con el objetivo de poder volver a facilitarnos esos datos en un futuro. La idea es que llegado de nuevo el momento, seamos capaces de ganar tiempo haciendo uso de esta funcionalidad:
La manera en la que están trabajando a día de hoy la mayoría de los navegadores frente a estos autocompletados es a través del tipo de input (text, email, etcétera), por lo que en ocasiones puede ser ambiguo y no faciliten la información esperada. Esta característica está habilitada por defecto, pero es posible a través de código indicar que un elemento del formulario no queremos que se autocomplete:
<input type="email" name="email" value="" autocomplete="off"/>
Otra de las aproximaciones con la que se está trabajando para reconocer qué tipo de dato esperamos en un campo es a través del atributo name, pero para ello sería necesario un acuerdo entre el front-end y el back-end que en ocasiones no resulta posible.
Por último, se han definido una serie de tokens o hints, los cuales deberían ser detectados por los navegadores, con el objetivo de reconocer qué tipo de información esperamos en un campo específico:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Autocomplete</title>
</head>
<body>
<header>
<h1>HTML 5 Autocomplete</h1>
</header>
<article>
<form method="post" action="">
<fieldset>
<div>
<label for="UserName">User name:</label>
<input name="UserName" type="text" autocomplete="username" />
</div>
<div>
<label for="FirstName">First Name:</label>
<input name="FirstName" type="text" autocomplete="given-name" />
</div>
<div>
<label for="LastName">Last Name:</label>
<input id="LastName" name="LastName" type="text" autocomplete="family-name" />
</div>
<div>
<label for="Company">Company:</label>
<input id="Company" name="Company" type="text" autocomplete="organization" />
</div>
<div>
<label for="Address">Address:</label>
<input id="Address" name="Address" type="text" autocomplete="address-line1" />
</div>
<div>
<label for="PostalCode">Postal code:</label>
<input id="PostalCode" name="PostalCode" autocomplete="postal-code" />
</div>
<div>
<label for="City">City:</label>
<input id="city" name="city" type="text" autocomplete="locality" />
</div>
</ul>
</fieldset>
</form>
</article>
</body>
</html>Como podemos ver en el código anterior, tenemos un formulario con una serie de campos y un autocomplete por cada uno de ellos. En este caso, en lugar de utilizar los valores on/off, se les asigna un hint relacionado con el tipo de dato que se espera, con el fin de que el navegador pueda proporcionar los datos correctos.
Chrome en este punto ha evolucionado de una forma considerable respecto al resto y, al posicionarnos en un campo con un hint reconocido, nos muestra en amarillo todos los elementos que es capaz de rellenar sin tan siquiera pasar por ellos. También nos permite generar diferentes conjuntos de datos en la configuración:
Incluso la barra de Google para Internet Explorer nos facilita esta misma funcionalidad:
Por otro lado, Safari posee un apartado en su configuración que nos permite también definir nuestros datos:
Internet Explorer nos ofrece una configuración bastante limitada, ciñéndose únicamente a qué tipos permitimos que se autocompleten, pero no nos facilita el modificar los valores que tiene almacenados.
En el caso de Firefox, ocurre exactamente igual que en Internet Explorer, permitiéndonos únicamente decir si queremos recordar o no los valores introducidos en el pasado:
Lo ideal sería que el día de mañana todos los navegadores pudieran actuar como Chrome y Safari: poder tener configurados conjuntos de datos y poder rellenar esta información de manera automática.
Por otro lado, el año pasado se escribió un artículo en elladodelmal.com bastante interesante donde se avisaba de un bug en Chrome que te permitía recuperar los datos del usuario a través del autofill sin que el mismo fuera consciente de ello.
Más información en Whatwg – Autocomplete Types
¡Saludos!