1Password is designed to fill and save passwords on most websites. You shouldn’t have to do anything special to support the 1Password extension, as long as you develop your pages according to best practices. This will make the intention of each page element clear. 1Password will have an easier time understanding your page even when you make changes to it.
Build logical forms
If 1Password has trouble saving or filling on your site, make sure you’re following best practices with your forms:
- Use unique element ids for every field.
- Group related fields (like usernames and passwords) together in the same
- Separate unrelated fields into different
<form>elements. For example, put registration and sign-in fields in different forms.
Password change forms
To make the intention of each form element clear on password change forms, ask for the current password, the new password, and a password confirmation in that order.
Making your website accessible benefits everyone who uses your website and is something we all should be doing anyway. As a bonus, making your site accessible provides clues to 1Password as well.
When examining a page, 1Password can take advantage of accessibility cues to locate fields:
- Give every field a
forattribute on your labels to associate them with the appropriate field:
<label for="username-field">Username</label> <input name="username" id="username-field">
Use ARIA attributes to annotate form fields. For example, use the
aria-hiddenattribute on fields that aren’t visible.
To improve reliability
Follow these additional guidelines to ensure 1Password will always work with your site, even when you make changes to it:
placeholderattributes on fields instead of overlays.
- Don’t use generated field names and ids.
- Don’t dynamically add or remove fields from the DOM. Reuse fields and hide them when you don’t need them.
autofillattributes on fields. They’re not required, but there may be fields 1Password can’t locate without them.
Make sure you’re testing with the latest beta releases of both 1Password and the 1Password extension.
If you’re still having trouble after following the guidelines above, let us know on the 1Password Support forum.