La mayoría de los sitios web tienen un formulario en línea para diversos fines: registro de usuarios, realización de pedidos, reserva de entradas, por nombrar algunos. Sin embargo, completar esos formularios puede ser una tarea tediosa y repetitiva para la mayoría de los usuarios, ya que es probable que ingresen información repetitiva, como el nombre, la dirección de correo electrónico, la dirección postal y el número de teléfono.

Los usuarios pueden llegar a abandonar por completo el formulario si la lista se vuelve demasiado larga. Para tratar de resolver este problema, un equipo en Google propuso un nuevo atributo llamado “autocompletetype“, que permite que las respuestas se llenen automáticamente en el formulario.

¿El Atributo Autocomplete?

El autollenado no es algo nuevo. Hemos podido hacerlo todo este tiempo con el atributo ya existente, autocomplete. Estos dos atributos, autocomplete y autocompletetype, sirven principalmente para lo mismo. La única diferencia está en su diseño.

El atributo autocomplete está destinado a habilitar (o deshabilitar) la funcionalidad de autollenado en los formularios. En cambio, el atributo autocompletetype está diseñado para que los desarrolladores web puedan asignar un tipo de dato estándar que ayude a los navegadores o aplicaciones a completar los formularios de manera más precisa.

Según se indica en la propuesta: los productos de autollenado actuales dependen principalmente de pistas contextuales, como el atributo name, la etiqueta label y el texto de placeholder, para determinar qué se debe completar en los elementos del formulario (lo cual no es confiable en situaciones particulares).

Uso de AutocompleteType

En el momento de la redacción, este atributo se especifica de la siguiente manera: x-autocompletetype, y acepta tipos de datos para información comúnmente requerida en un formulario en línea, como: full-name, street-address, city, postal-code, y country-name.

El siguiente fragmento muestra un ejemplo de su implementación:

HTML
<form method="get" accept-charset="utf-8">
    <label for="nombres">Nombres:</label>
    <input id="nombres" type="text" name="nombres" value="" x-autocompletetype="given-name">

    <label for="apellidos">Apellidos:</label>
    <input type="text" name="apellidos" value="" x-autocompletetype="surname">

    <label for="email">Email:</label>
    <input id="email" type="text" name="email" value="" x-autocompletetype="email">

    <label for="telp">Teléfono:</label>
    <input id="telp" type="text" name="telephone" value="" x-autocompletetype="tel">

    <label for="fax">Fax:</label>
    <input id="fax" type="text" name="fax" value="" x-autocompletetype="fax">
  </form>
CSS
body {
    font-family: Arial, sans-serif;
  }

  form {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
Ejemplo de implementación de AutocompleteType
Ejemplo de implementación de AutocompleteType

Observa que utilicé mi idioma local para los dos primeros elementos del formulario. Este es uno de los casos en los que el tipo de autocompletado sería muy útil. Proporciona a los navegadores o aplicaciones que posiblemente no comprendan mi idioma local una etiqueta estándar para que puedan completar el formulario correctamente de manera automática.

Palabras Finales

¿Podemos usar el atributo en este momento? En resumen, sí podemos. Los navegadores o aplicaciones que no admitan el atributo simplemente lo ignorarán. Sin embargo, aquellos que lo hayan implementado, como Google Chrome, pueden aprovecharlo y brindar una mejor experiencia a nuestros usuarios.

Sin embargo, lo único que me preocupa es que el atributo todavía está en etapa experimental y la estandarización todavía se está discutiendo. Por lo tanto, podría haber algunos cambios en la implementación en el futuro, como se indica en Google Webmaster Central: “Como cualquier propuesta en etapa temprana, esperamos que esto cambie y evolucione a medida que la comunidad de estándares web proporcione comentarios“.

Recursos Adicionales

Para obtener más información sobre el atributo autocompletetype, puedes consultar las siguientes referencias: [enlaces a recursos adicionales].

5/5 - (1 voto)