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
- Antes de comenzar
- Obtenga Dashlane para llenar automáticamente los ingresos, los nombres de usuario y las contraseñas
- Obtenga Dashlane para llenar automáticamente las contraseñas nuevas y modificadas
- 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>