Атрибут HTML: autocomplete

Атрибут 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>, у який вкладений елемент.

[!NOTE] Щоб надати автоматичне заповнення, користувацькі агенти можуть вимагати від елементів <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 не дозволяються.

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

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

Значення

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

off

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

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

on

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

<token-list>

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

Дивіться докладнішу інформацію у Стандарті WHATWG.

Лексеми списку лексем

Серед можливих лексем у <token-list>, за порядком:

1. Лексема іменування групи
2. Ідентифікатор групування
3. Лексеми подробиць
4. Вебавторизація

Названі групи

Щоб створити названу групу полів форми, можна вжити необов'язкову лексему section-*. Якщо вона присутня, то повинна бути першою лексемою в розділеному пробілами списку лексем.

section-*

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

Ідентифікатор групування

Необов'язковий ідентифікатор групування shipping або billing.

shipping

Поле, визначене наступними лексемами, є частиною адреси доставлення або контактної інформації.

billing

Поле, визначене наступними лексемами, є частиною адреси виставлення рахунків або контактної інформації.

Лексеми подробиць

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

Тип приймача

Серед лексем, що вказують на тип приймача:

home

Тип контакту, визначеного наступними лексемами, призначений для зв'язку з приймачем у нього вдома.

work

Тип контакту, визначеного наступними лексемами, призначений для зв'язку з приймачем у нього на роботі.

mobile

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

fax

Приймач, визначений наступними лексемами, є факсимільною машиною.

page

Приймач, визначений наступними лексемами, є пейджером.

Лексеми цифрового контакту

Лексема або група лексем для номерів телефонів або складових частин таких номерів, телефонних розширень, адрес електронної пошти та протоколів миттєвого спілкування.

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

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

email

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

impp

URL для кінцевої точки протоколу миттєвих повідомлень, наприклад, xmpp:username\@example.net.

Інші лексеми

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

name

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

honorific-prefix

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

given-name

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

additional-name

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

family-name

Прізвище.

honorific-suffix

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

nickname

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

username

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

new-password

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

current-password

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

one-time-code

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

organization-title

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

organization

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

street-address

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

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

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

url

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

photo

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

Лексема вебавторизації

У разі <input> and <textarea> останньою може стояти лексема webauthn, аби вказати на те, що користувацький агент повинен показати дані публічного ключа, коли користувач взаємодіє з контрольним елементом.

webauthn

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

Приклади

<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
• Усі глобальні атрибути