Optimice los formularios web para el llenado automático de Dashlane

Si tiene problemas con el llenado automático de los formularios web en un sitio web que usted creó o administra, puede optimizar el HTML para que funcione mejor con Dashlane. Puede indicarle a Dashlane dónde y qué llenar automáticamente etiquetando los campos adecuados con el atributo data-form-type.

En este artículo, se explican las situaciones más comunes, pero puede usar cualquiera de los valores que están en esta página de Github sobre Dashlane y los formularios web.

Contenido

1. Antes de comenzar
2. Obtenga Dashlane para llenar automáticamente los ingresos, los nombres de usuario y las contraseñas
3. Obtenga Dashlane para llenar automáticamente las contraseñas nuevas y modificadas
4. Obtenga Dashlane para llenar automáticamente la información de pago

Antes de comenzar

Cada atributo data-form-type debe tener uno o más valores. Separe los valores adicionales por coma, sin espacios:

data-form-type="password,new"

Si no desea que Dashlane llene automáticamente un campo específico, use el valor “other”:

data-form-type=”other”

Obtenga Dashlane para llenar automáticamente los ingresos, los nombres de usuario y las contraseñas

Si tiene una página web de ingreso y Dashlane no puede llenar automáticamente el nombre de usuario y la contraseña, agregue esos atributos data-form-type al HTML de la página web.

Para el propio formulario de ingreso, use lo siguiente:

data-form-type=”login”

Para el nombre de usuario, use lo siguiente:

data-form-type=”username”

Para la contraseña, use lo siguiente:

data-form-type=”password”

Ejemplo de un formulario típico de ingreso con los atributos data-form-type agregados en negrita:

<form action="/login" data-form-type="login">
<label for="username">Nombre de usuario</label>
<input type="text" id="username" data-form-type="username">

<label for="password">Contraseña</label>
<input type="password" id="password" data-form-type="password">
</form>

Si su campo de nombre de usuario permite que la gente ingrese con un correo electrónico o con un número de teléfono, añada “email,phone” como atributos data-form-type adicionales al HTML de la página web.

Así debe verse la línea de HTML con los atributos adicionales agregados en negrita:

<label for="username">Nombre de usuario</label>
<input type="text" id="username" data-form-type="username,email,phone">

Obtenga Dashlane para llenar automáticamente las contraseñas nuevas y modificadas

Si su página web permite que la gente cambie sus contraseñas, y Dashlane no puede llenar automáticamente la contraseña nueva, agregue los siguientes atributos data-form-type al HTML de la página web.

Para el propio formulario de cambio de contraseña, use lo siguiente:

data-form-type=”change_password”

Para la contraseña anterior, use lo siguiente:

data-form-type=”password”

Para la contraseña nueva, use lo siguiente:

data-form-type=”password,new”

Si hay una confirmación para la contraseña nueva, use lo siguiente:

data-form-type=”password,confirmation”

Ejemplo de un formulario típico de contraseña con los atributos data-form-type agregados en negrita:

<form action="/change-password" data-form-type="change_password">
<label for="old-password">Su antigua contraseña:</label>
<input type="password" id="old-password" data-form-type="password">

<label for="new-password">Su nueva contraseña:</label>
<input type="password" id="new-password" data-form-type="password,new">

<label for="new-password-repeat">Repita su nueva contraseña:</label>
<input type="password" id="new-password-repeat" data-form-type="password,confirmation">
</form>

Obtenga Dashlane para llenar automáticamente la información de pago

Si tiene una página web que permite que la gente introduzca los datos de su tarjeta de crédito, y Dashlane no puede llenar automáticamente la información, agregue los siguientes atributos data-form-type al HTML de la página web:

Para el propio formulario de pago, use lo siguiente:

data-form-type=”payment”

Para el número de tarjeta de crédito, use lo siguiente:

data-form-type=”payment,credit_card”

Si está dividido en varios campos, use este atributo para cada uno:

“payment,credit_card,part”

Para la fecha de expiración, use lo siguiente:

data-form-type=”payment,credit_card,date”

Si está dividido en mes y año, use lo siguiente:

data-form-type="payment,credit_card,date,expiration,month"

y

data-form-type="payment,credit_card,date,expiration,year"

Para el CVV de tarjeta de crédito, use lo siguiente:

data-form-type="payment,credit_card,cvv"

Ejemplo de un formulario típico de pago con los atributos data-form-type agregados en negrita:

<form action="/checkout-payment" data-form-type="payment">
<label>Número de la tarjeta de crédito</label>
<fieldset>
<input type="text" id="cc-number-block-1" aria-label="credit card number block 1" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-2" aria-label="credit card number block 2" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-3" aria-label="credit card number block 3" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-4" aria-label="credit card number block 4" data-form-type="payment,credit_card,part">
</fieldset>

<label>Fecha de expiración/label>
<fieldset>
<select id="cc-expiration-month" data-form-type="payment,credit_card,date,expiration,month">
<option value="" aria-label="select the expiration month of your card">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>

</select>
<select id="cc-expiration-year" data-form-type="payment,credit_card,date,expiration,year">
<option value="" aria-label="select the expiration year of your card">Year</option>
<option value="24">24</option>
<option value="23">23</option>
<option value="21">21</option>
</select>
</fieldset>

<label for="cvv">CVV</label>
<input type="text" id="cvv" data-form-type="payment,credit_card,cvv">
</form>