Атрибут HTML: autocomplete

{{HTMLSidebar}}

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

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

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

Опис

Атрибут autocomplete надає користувацькому агенту підказку щодо того, як заповнювати форму наперед, і чи треба взагалі це робити. Значення атрибута може бути ключовим словом off або on, або впорядкованим списком лексем, розділених пробілами.

<input autocomplete="off" />
<input autocomplete="on" />
<input autocomplete="shipping street-address" />
<input autocomplete="section-user1 billing postal-code" />

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

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

1. Мати атрибут name чи id
2. Бути нащадком елемента <form>
3. Належати формі, що має кнопку подання

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

Частина лексем може вживатися більш ніж раз, і можуть очікуватися потенційно різні значення, наприклад, лексема zip-code у формі, що містить як адресу доставлення, так і адресу оплати. Додавання кількох різних лексем у список, розділений пробілами, призводить до того, що пов'язані елементи управління формою отримують унікальні значення автозаповнення: у цьому випадку autocomplete="shipping zip-code" та autocomplete="billing zip-code".

Частина значень автозаповнення можуть потребувати багаторазового перевикористання. Наприклад, форма може містити кілька адрес доставлення та, отже, кілька входжень "shipping zip-code", і при цьому можуть очікуватися різні значення. Щоб зробити значення автозаповнення унікальними в таких випадках, перша лексема в списку лексем, розділених пробілами, може бути лексемою section-*, де перші вісім символів лексеми завжди є рядком "section-", а далі стоїть буквено-цифровий рядок. Усі поля форми, які мають лексему section-* з однаковим буквено-цифровим рядком, належать до однієї названої групи.

Якщо додавати атрибут autocomplete на елементи полів hidden, то значення таких атрибутів має бути впорядкованим списком лексем, розділених пробілами; ключові слова on та off не дозволяються.

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

Значення

Значення цього атрибута є або ключовим словом off або on, або розділеним пробілами <token-list> (списком лексем), що описує природу значення автозаповнення.

off

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

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

on

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

<token-list>

Упорядкований перелік лексем, розділених пробілами, що складається з лексем подробиць автозаповнення. Серед лексем подробиць:

"section-*"

Визначає назву групи формових елементів. Лексема, чиї перші вісім символів – рядок "section-", незалежно від регістру, за якими йдуть додаткові символи. Якщо присутня, ця лексема повинна бути першою в переліку лексем, розділених пробілами. Усі формові контрольні елементи, які починаються з такої ж лексеми, належать до названої групи.

"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"

Одноразовий пароль для перевірки ідентичності користувача, який використовується як додатковий фактор при вході. Найчастіше це код, отриманий за допомогою якогось стороннього механізму, наприклад, 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.

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

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

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

• Елемент <input>
• Елемент <select>
• Елемент <textarea>
• Елемент <form>
• Форми HTML
• Усі глобальні атрибути