Si vous rencontrez des problèmes de remplissage automatique avec les formulaires Web sur un site Web que vous avez créé ou que vous gérez, vous pouvez optimiser le HTML pour mieux fonctionner avec Dashlane. Vous pouvez indiquer à Dashlane où et quoi remplir automatiquement en étiquetant les champs appropriés avec l’attribut data-form-type.
Cet article explique les scénarios les plus courants, mais vous pouvez utiliser n’importe laquelle des valeurs de cette page Github à propos de Dashlane et des formulaires Web.
Remarque : Si vous utilisez l’application Dashlane pour macOS, vous pouvez uniquement remplir automatiquement les détails d’identifiant enregistrés, même après optimisation du HTML. Toutefois, vous pouvez passer à l’extension du navigateur Dashlane pour Safari afin d’avoir accès à notre fenêtre contextuelle d’extension riche en fonctionnalités et à la vue du coffre-fort dans le navigateur, ainsi qu’aux meilleures capacités de remplissage automatique offertes par Dashlane.
Bien démarrer avec l’extension du navigateur Dashlane pour Safari
Chaque attribut data-form-type doit avoir une ou plusieurs valeurs. Séparez les valeurs supplémentaires par une virgule sans espaces :
data-form-type="password,new"Si vous ne voulez pas que Dashlane remplisse automatiquement un champ spécifique, utilisez la valeur « other » pour empêcher Dashlane de remplir automatiquement le champ. Cependant, vous verrez toujours Dashlane dans le HTML du formulaire lors de l’affichage de la page avec des outils de développement ou similaires.
data-form-type=”other”Permettre à Dashlane de remplir automatiquement les identifiants, les noms d’utilisateur et les mots de passe
Si vous avez une page Web de connexion et que Dashlane ne peut pas remplir automatiquement le nom d’utilisateur et le mot de passe, ajoutez ces attributs data-form-type au HTML de la page Web.
Pour le formulaire de connexion lui-même, utilisez :
data-form-type=”login”Pour le nom d’utilisateur, utilisez :
data-form-type=”username”Pour le mot de passe, utilisez :
data-form-type=”password”Exemple de formulaire de connexion typique avec les attributs data-form-type ajoutés en gras :
<form action="/login" data-form-type="login">
<label for="username">Nom d'utilisateur</label>
<input type="text" id="username" data-form-type="username">
<label for="password">Mot de passe</label>
<input type="password" id="password" data-form-type="password">
</form>
Si votre champ de nom d’utilisateur permet aux personnes de se connecter avec un e-mail ou un numéro de téléphone, ajoutez « email,phone » comme attributs data-form-type supplémentaires au HTML de la page Web.
Voici à quoi ressemble cette ligne de HTML, avec les attributs supplémentaires ajoutés en gras :
<label for="username">Nom d'utilisateur</label>
<input type="text" id="username" data-form-type="username,email,phone">Permettre à Dashlane de remplir automatiquement les mots de passe nouveaux ou modifiés
Si votre page Web permet aux personnes de modifier leur mot de passe et que Dashlane ne peut pas remplir automatiquement le nouveau mot de passe, ajoutez les attributs data-form-type suivants au HTML de la page Web.
Pour le formulaire de modification du mot de passe lui-même, utilisez :
data-form-type=”change_password”Pour l’ancien mot de passe, utilisez :
data-form-type=”password”Pour le nouveau mot de passe, utilisez :
data-form-type=”password,new”Pour une confirmation du nouveau mot de passe, utilisez :
data-form-type=”password,confirmation”Exemple d’un formulaire de mot de passe typique, avec les attributs data-form-type ajoutés en gras :
<form action="/change-password" data-form-type="change_password">
<label for="old-password">Votre ancien mot de passe :</label>
<input type="password" id="old-password" data-form-type="password">
<label for="new-password">Votre nouveau mot de passe :</label>
<input type="password" id="new-password" data-form-type="password,new">
<label for="new-password-repeat">Répétez votre nouveau mot de passe :</label>
<input type="password" id="new-password-repeat" data-form-type="password,confirmation">
</form>Installer Dashlane pour remplir automatiquement les informations de paiement
Si vous avez une page Web qui permet aux personnes de saisir leur carte bancaire et que Dashlane ne peut pas remplir automatiquement les informations, ajoutez les attributs data-form-type suivants au HTML de la page :
Pour le formulaire de paiement lui-même, utilisez :
data-form-type=”payment”Pour le numéro de carte bancaire, utilisez :
data-form-type=”payment,credit_card”Si celui-ci est divisé en plusieurs champs, utilisez ceci pour chacun :
“payment,credit_card,part”Pour la date d'expiration, utilisez :
data-form-type=”payment,credit_card,date”Si celle-ci est divisée en mois et année, utilisez :
data-form-type="payment,credit_card,date,expiration,month"et
data-form-type="payment,credit_card,date,expiration,year"Pour le CVV de la carte bancaire, utilisez :
data-form-type="payment,credit_card,cvv"Exemple d’un formulaire de paiement typique avec les attributs data-form-type ajoutés en gras :
<form action="/checkout-payment" data-form-type="payment">
<label>Numéro de carte bancaire</label>
<fieldset>
<input type="text" id="cc-number-block-1" aria-label="bloc 1 du numéro de carte bancaire" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-2" aria-label="bloc 2 du numéro de carte bancaire" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-3" aria-label="bloc 3 du numéro de carte bancaire" data-form-type="payment,credit_card,part">
<input type="text" id="cc-number-block-4" aria-label="bloc 4 du numéro de carte bancaire" data-form-type="payment,credit_card,part">
</fieldset>
<label>Date d'expiration/label>
<fieldset>
<select id="cc-expiration-month" data-form-type="payment,credit_card,date,expiration,month">
<option value="" aria-label="sélectionnez le mois d'expiration de votre carte">Mois</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="sélectionnez l'année d'expiration de votre carte">Année</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>