Атрибут HTML: autocomplete

{{HTMLSidebar}}

Атрибут HTML autocomplete дає веброзробникам змогу задати, які дозволи, якщо будь-які взагалі, має користувацький агент, на те, аби надавати автоматизовану допомогу в заповненні полів форми, а також настанову для браузера щодо того, якого типу інформація очікується в полі.

Цей атрибут доступний на елементах <input>, які приймають за введення текст або числове значення, елементах <textarea>, елементах <select> та елементах <form>.

Джерело пропонованих значень, загалом, залежить від браузера; зазвичай значення беруться з попередніх значень, введених користувачем, але вони також можуть бути попередньо налаштованими значеннями. Наприклад, браузер може дозволити користувачеві зберегти своє ім'я, адресу, номер телефону та адреси електронної пошти для автоматичного заповнення. Можливо, браузер пропонує можливість зберегти зашифровану інформацію про кредитну картку для автоматичного заповнення після процедури аутентифікації.

Якщо елемент <input>, <select> або <textarea> не має атрибута autocomplete, то браузери використовують атрибут autocomplete форми-власника елемента, тобто або елемент <form>, нащадком якого є елемент, або елемент <form>, id якого вказано в атрибуті елемента form (див. атрибут <form> autocomplete).

Примітка: Щоб надати автоматичне заповнення, користувацькі агенти можуть вимагати від елементів <input>/<select>/<textarea>:

  1. Мати атрибут name чи id
  2. Бути нащадком елемента <form>
  3. Щоб форма мала кнопку submit

Спробуйте його в дії

Значення

"off"

Браузерові не дозволено автоматично вводити чи вибирати значення для такого поля. Може бути так, що документ або застосунок надає власну логіку автоматичного доповнення, або що безпекові міркування вимагають, аби значення поля не вводилося автоматично.

Примітка: У більшості сучасних браузерів autocomplete зі значенням "off" не заважає менеджерові паролів запитувати користувачів, чи бажають вони зберегти інформацію про свої ім'я та пароль, а також автоматично вводити ці значення в формі автентифікації на сайті. Дивіться атрибут autocomplete і поля автентифікації.

"on"

Браузерові дозволено автоматично доповнювати введення. Вказівка щодо того, якого типу дані очікується в полі, не надається, тому браузер може вирішувати це самостійно.

"name"

Поле очікує на значення, що є повним іменем особи. Як правило, краще використовувати "name", ніж розбивати ім'я на складові частини, тому що такий підхід уникає проблеми розмаїття людських імен та того, як воно структуруються; проте також можна використовувати наступні значення autocomplete, якщо все ж потрібно розбити ім'я на складові частини:

"honorific-prefix"

Префікс або науковий ступінь, наприклад, "Пані", "Пан", "Панна", "Місис", "Міс", "Містер", "Доктор", "Мадемуазель".

"given-name"

Особове (або "перше") ім'я.

"additional-name"

Середнє ім'я.

"family-name"

Прізвище.

"honorific-suffix"

Суфікс, наприклад, "молодший", "бакалавр наук", "кандидат наук", "IV".

"nickname"

Прізвисько або псевдонім.

"email"

Адреса електронної пошти.

"username"

Ім'я користувача або облікового запису.

"new-password"

Новий пароль. При створенні нового облікового запису або зміні пароля це значення повинно застосовуватись для полів "Уведіть новий пароль" та "Підтвердьте новий пароль", на противагу "Введіть свій теперішній пароль", що також може бути присутнім. Воно може використовуватись браузером як щоб запобігти випадковому введенню наявного пароля, так і для допомоги у створенні безпечного пароля (дивіться також Запобігання автозаповненню при autocomplete="new-password").

"current-password"

Поточний пароль користувача.

"one-time-code"

Одноразовий пароль (OTP) для перевірки ідентичності користувача, що використовується як додатковий фактор при вході. Найчастіше це код, отриманий за допомогою якогось стороннього механізму, наприклад, SMS, електронної пошти або застосунку-автентифікатора.

"organization-title"

Назва посади або ранг, котрий особа має в межах організації, наприклад, "Старший технічний дописувач", "Президент", "Заступник керівника відділу".

"organization"

Назва компанії або організації, наприклад "ПАТ Еліт сервіс" або "ГО Теплі серця".

"street-address"

Вулична адреса. Значення може мати кілька рядків тексту і повинно цілком ідентифікувати місце адреси в межах другого адміністративного рівня (зазвичай міста або містечка), але не повинно вміщати назву міста, поштовий індекс та назву країни.

"shipping"

Вулична адреса для надсилання товару. Може бути поєднана з іншими лексемами, наприклад, "shipping street-address" чи "shipping address-level2".

"billing"

Вулична адреса для зв'язування з використаною формою оплати. Може бути поєднана з іншими лексемами, наприклад, "billing street-address" чи "billing address-level2".

"address-line1", "address-line2", "address-line3"

Кожен окремий рядок вуличної адреси. Такі поля повинні з'являтися лише тоді, коли "street-address" відсутнє.

"address-level4"

Найдрібніший адміністративний рівень в адресах, що мають чотири рівні.

"address-level3"

Третій адміністративний рівень в адресах, що мають щонайменше три рівні.

"address-level2"

Другий адміністративний рівень в адресах, що мають щонайменше два рівні. У країнах з двома адміністративними рівнями це зазвичай буде місто, селище, село або інше місце, де знаходиться адреса.

"address-level1"

Перший адміністративний рівень адреси. Зазвичай це провінція, де знаходиться адреса. У США це буде штат. У Швейцарії - кантон. У Великій Британії - поштове місто.

"country"

Код країни або території.

"country-name"

Назва країни або території.

"postal-code"

Поштовий індекс (у США це ZIP-код).

"cc-name"

Повне ім'я, у такому вигляді, як воно надруковане або зареєстроване на платіжному інструменті, наприклад, на кредитній картці. Зазвичай краще використовувати повне ім'я, ніж розбивати його на частини.

"cc-given-name"

Особове ім'я, у такому вигляді, як на платіжному інструменті, наприклад, на кредитній картці.

"cc-additional-name"

Середнє ім'я, у такому вигляді, як на платіжному інструменті або кредитній картці.

"cc-family-name"

Прізвище, у такому вигляді, як на кредитній картці.

"cc-number"

Номер кредитної картки або інший номер, що ідентифікує платіжний інструмент, наприклад, номер рахунку.

"cc-exp"

Дата закінчення терміну дії платіжного інструменту, зазвичай у форматі "MM/YY" або "MM/YYYY".

"cc-exp-month"

Місяць, у якому закінчується термін дії платіжного інструменту.

"cc-exp-year"

Рік, у якому закінчується термін дії платіжного інструменту.

"cc-csc"

Код безпеки платіжного інструменту; на кредитних картках це 3-цифровий код перевірки, що присутній на звороті картки.

"cc-type"

Тип платіжного інструменту (наприклад, "Visa" або "Master Card").

"transaction-currency"

Валюта, в якій буде проведена транзакція.

"transaction-amount"

Сума, вказана в валюті, котра зі свого боку - у "transaction-currency", транзакції для платіжної форми.

"language"

Бажана мова, задана у вигляді дійсного тегу мови BCP 47.

"bday"

Дата народження, у вигляді повної дати.

"bday-day"

День місяця дати народження.

"bday-month"

Місяць року дати народження.

"bday-year"

Рік дати народження.

"sex"

Гендерна ідентичність (наприклад, "Жінка", "Фаафафіне", "Хіджра", "Чоловік", "Небінарна особа"), у вигляді тексту вільної форми, без символів нового рядка.

"tel"

Повний номер телефону, включно з кодом країни. Якщо необхідно розбити номер телефону на складові частини, то можна для таких полів використати наступні значення:

"tel-country-code"

Код країни, наприклад, "1" для США, Канади та інших місцевостей у Північній Америці та частині Карибського басейну.

"tel-national"

Увесь номер телефону без частини країни, включно з внутрішнім префіксом країни. Для номера телефону "1-855-555-6502" значення цього поля буде "855-555-6502".

"tel-area-code"

Код місцевості, зі внутрішнім префіксом країни, якщо це необхідно.

"tel-local"

Номер телефону без кодів країни та місцевості. Може бути розбитий на дві частини, для номерів телефону, що містять номер телефонної станції, а далі – номер в межах станції. У номері телефону "555-6502" буде "tel-local-prefix" для "555" та "tel-local-suffix" для "6502".

"tel-extension"

Телефонний код розширення в межах номера телефону, наприклад, номер кімнати або номер номера в готелі або номер офісу в компанії.

"impp"

URL для кінцевої точки протоколу миттєвого обміну повідомленнями, наприклад, "xmpp:[email protected]".

"url"

URL, наприклад, домашня сторінка або адреса вебсайту компанії, якщо це відповідає контексту інших полів у формі.

"photo"

URL зображення, що представляє особу, компанію або контактну інформацію, вказану в інших полях форми.

"webauthn"

Ключі, згенеровані за допомогою API Вебавтентифікації, які запитуються за допомогою умовного виклику navigator.credentials.get() (тобто того, який включає mediation: 'conditional'). Більше інформації у Вході за допомогою ключа через автозаповнення форми.

Детальніша інформація – у стандарті WHATWG.

Примітка: Атрибут autocomplete також контролює те, чи Firefox, на відміну від інших браузерів, зберігатиме динамічний стан вимкнення та (за наявності) динамічний стан позначення елемента <input>, елемента <textarea> або цілого <form>, між завантаженнями сторінки. Функція збереження усталено ввімкнена. Атрибут autocomplete зі значенням off вимикає цю функцію. Це працює навіть тоді, коли атрибут autocomplete зазвичай не застосовується у зв'язку з type. Див. ваду Firefox 654072.

Приклади

<div>
  <label for="cc-number">Уведіть свій номер кредитної картки</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>

Адміністративні рівні в адресах

Чотири поля адміністративних рівнів (від address-level1 до address-level4) описують адресу в термінах зростання точності в межах країни, в якій знаходиться адреса. У кожної країни є власна система адміністративних рівнів, і вони можуть розташовувати рівні в різному порядку при написанні адрес.

Поле address-level1 завжди представляє найширший адміністративний рівень; це найменш конкретна частина адреси, за винятком назви країни.

Гнучкість компонування форми

З урахуванням того, що різні країни пишуть свою адресу по-різному, з кожним полем в різних місцях в межах адреси, і навіть різними наборами та кількістю полів взагалі, може бути корисно, якщо, за можливості, ваш сайт може переключитися на розмітку, очікувану вашими користувачами при представленні форми введення адреси, враховуючи країну, в якій знаходиться адреса.

Варіації

Спосіб, у який вживається кожний адміністративний рівень, відрізняється в різних країнах. Нижче є кілька прикладів; їхній список не має на меті бути вичерпним.

Сполучені штати Америки

Типова домашня адреса в межах США має такий вигляд:

432 Anywhere St Exampleville CA 95555

У США найменш конкретна частина адреси — це штат, у цьому випадку «CA» (офіційне скорочення служби поштового зв'язку США для «Каліфорнії»). Таким чином, address-level1 — це штат, або «CA» у цьому випадку.

Друга за конкретністю частина адреси – це назва міста або містечка, тож address-level2 – це «Exampleville» у цьому прикладі адреси.

Адреси США не використовують рівні 3 і вище.

Великобританія

Форми адреси у Великобританії повинні містити один рівень адреси та один, два або три рядки адреси, в залежності від адреси. Повна адреса має такий вигляд:

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

Рівні адреси:

  • address-level1: Поштове місто – у цьому випадку "Winchelsea".
  • address-line2: Місцевість – у цьому випадку "Upper-Wapping".
  • address-line1: Конкретика щодо будинку та вулиці – "103 Frogmarch Street".

Поштовий індекс – окремо. Зверніть увагу на те, що насправді можна використовувати лише поштовий індекс та address-line1 для успішного доставлення пошти у Великобританії, тож вони мають бути єдиними обов'язковими елементами, але зазвичай люди намагаються надати більше деталей.

Китай

Китай може використовувати три адміністративні рівні: провінцію, місто та район.

Шестицифровий поштовий індекс – не завжди потрібен, але коли він надається, то розміщується окремо, з підписом для зрозумілості. Наприклад:

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编:100005

Японія

Адреса в Японії здебільшого записується в один рядок, у порядку від менш конкретних до більш конкретних частин (у зворотному порядку відносно адрес США). У адресі присутні два або три адміністративні рівні. Додатковий рядок може використовуватися для вказівки назв будівель та номерів кімнат. Поштовий індекс розміщується окремо. Наприклад:

〒 381-0000 長野県長野市某町 123

"〒" і сім цифр далі представляють поштовий індекс.

Поле address-level1 використовується для префектур або Токійської метрополії; у цьому випадку це "長野県" (префектура Нагано). address-level2 зазвичай використовується для міст, округів, містечок та сіл; у цьому випадку це "長野市" (місто Нагано). "某町 123" – це address-line1, який складається з назви району та номера ділянки.

Україна

Згідно з затвердженими Кабінетом міністрів України Правилами надання послуг поштового зв'язку, поштова адреса вказується в такій послідовності:

  1. найменування вулиці (проспекту, бульвару, провулку), номер будинку, квартири;
  2. найменування населеного пункту, району, області;
  3. поштовий індекс;
  4. країна призначення.

У разі, коли поштове відправлення адресується до запитання або на абонементну скриньку, порядок наступний:

  1. до запитання (абонементна скринька);
  2. найменування населеного пункту, району, області;
  3. найменування об'єкта поштового зв'язку місця призначення;
  4. поштовий індекс;
  5. країна призначення.

Таким чином, найменування населеного пункту, району, області – записуються в Україні здебільшого одним рядком (у полі address-level1). Хоча за технічної або іншої потреби можна додати окремі поля: address-level2 – для районів та територіальних громад, і address-level3 – для населених пунктів.

Наприклад, адреса у Києві:

вул. Івана Франка, 1 м. Київ 01001 Україна

У цьому випадку address-line1 – це "вул. Івана Франка, 1", а address-level1 – "м. Київ".

Приклад адреси в сільській місцевості:

вул. Шевченка, 1 с. Малі Кореничі Бородянський р-н Київська обл. 07834 Україна

Тут "вул. Шевченка, 1" – address-line1, "с. Малі Кореничі" – address-level3, "Бородянський р-н" – address-level2, "Київська обл." – address-level1, а "07834" – postal-code.

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
autocomplete
Chrome Full support 66
footnote
Edge Full support 79
Firefox Full support Yes
Internet Explorer No support No
Opera Full support Yes
Safari Compatibility unknown; please update this. ?
WebView Android Full support 66
footnote
Chrome Android Full support 66
footnote
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Compatibility unknown; please update this. ?
Samsung Internet Full support 9.0
footnote
The new-password value.
Chrome Full support Yes
Edge Full support 79
Firefox Full support 67
Internet Explorer No support No
Opera Full support Yes
Safari Compatibility unknown; please update this. ?
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support 67
Opera Android Full support Yes
Safari on iOS Compatibility unknown; please update this. ?
Samsung Internet Full support Yes

Дивіться також