Многие верстальщики до сих пор игнорируют атрибут autocomplete в формах или, что еще хуже, просто бахают везде autocomplete="off", думая, что так безопаснее. На самом деле всё ровно наоборот.
Правильная настройка автозаполнения помогает браузерам и менеджерам паролей (вроде 1Password или встроенного в iOS/Chrome) корректно подставлять данные, защищая пользователя от фишинга и ошибок.
Вот несколько критически важных значений, которые нужно использовать:
1. Создание нового пароля vs Вход
Если пользователь регистрируется или меняет пароль, обязательно пишите new-password. Если просто входит – current-password.
<input type="password" name="pwd" autocomplete="new-password">
<input type="password" name="pwd" autocomplete="current-password">
Зачем? Браузер поймет, что в первом случае нужно сгенерировать новый сложный пароль, а во втором – достать старый из базы.
2. Одноразовые коды из СМС (one-time-code)
Если вы делаете форму подтверждения телефона:
<input type="text" name="code" autocomplete="one-time-code" inputmode="numeric">
Зачем? На мобильных устройствах (iOS/Android) при получении СМС операционная система сама предложит вставить код из сообщения прямо над клавиатурой в один тап. Пользователю не придется сворачивать сайт и копировать цифры.
3. Поля для кредитных карт
Никогда не оставляйте их просто инпутами. Используйте:
cc-number — для номера карты
cc-exp — для даты окончания действия
cc-csc – для CVV/CVC кода
#html #полезности