Якщо ви нещодавно ставили на WordPress Contact Form 7, ви, ймовірно, помітили, що у формі за замовчуванням частина полів має значення autocomplete. Якщо у користувача в налаштуваннях браузера збережено його особисті дані, браузер буде підставляти їх автоматично, позбавляючи користувача необхідності вводити їх вручну.
Нижче розглянемо, для яких полів форми можна вказувати цю інструкцію.
<label> Ваше им'я
[text* your-name autocomplete:name] </label>
<label> Ваш email
[email* your-email autocomplete:email] </label>
<label> Тема
[text* your-subject] </label>
<label> Ваше повідомлення
[textarea your-message] </label>
[submit "Відправити"]Доступні значення
Спецификація HTML дає нам наступний список доступних значень autocomplete:
- name
- honorific-prefix
- given-name
- additional-name
- family-name
- honorific-suffix
- nickname
- username
- new-password
- current-password
- one-time-code
- organization-title
- organization
- street-address
- address-line1
- address-line2
- address-line3
- address-level4
- address-level3
- address-level2
- address-level1
- country
- country-name
- postal-code
- cc-name
- cc-given-name
- cc-additional-name
- cc-family-name
- cc-number
- cc-exp
- cc-exp-month
- cc-exp-year
- cc-csc
- cc-type
- transaction-currency
- transaction-amount
- language
- bday
- bday-day
- bday-month
- bday-year
- sex
- url
- photo
- tel
- tel-country-code
- tel-national
- tel-area-code
- tel-local
- tel-local-prefix
- tel-local-suffix
- tel-extension
- impp
Значення autocomplete з прикладами
У таблиці наведено значення параметра autocomplete та, по можливості, приклад для кожного поля.
| Параметр | Значення | Приклад |
| name | Повне ім’я | Анна Марія Бородіна |
| honorific-prefix | Префікс чи титул | «містер», «міс», «доктор» |
| given-name | Ім’я | Анна |
| additional-name | Друге ім’я | Марія |
| family-name | Прізвище | Бородіна |
| honorific-suffix | Суфікс | наприклад «молодший» (Jr.), II |
| nickname | Псевдонім, ім’я, що відображається, коротке ім’я | Аня |
| username | Ім’я користувача | AnnaB |
| new-password | Новий пароль | |
| current-password | Поточний пароль | |
| one-time-code | Одноразовий код перевірки | |
| organization-title | Посада | Менеджер |
| organization | Назва організації | ООО «Alpha Beta» |
| street-address | Вулиця | ул. Арсенальна |
| address-line1 | 1-й рядок адреси | буд. 10, кв.2 |
| address-line2 | 2-й рядок адреси | |
| address-line3 | 3-й рядок адреси | |
| address-level4 | Адміністративний рівень (для країн із 4-рівневою системою) | |
| address-level3 | 3-й адміністративний рівень (для країн з 4- або 3-рівневою системою) | с. Мала Снетінка |
| address-level2 | 2-й адміністративний рівень. Можливо місто, смт, село | Фастівський район |
| address-level1 | 1й адміністративний рівень – провінція чи область | Київска область |
| country | Код країни (двосимвольний) | UA |
| country-name | Назва країни | Україна |
| postal-code | Поштовий індекс | 86339 |
| cc-name | Повне ім’я, вказане на платіжному інструменті | Anna Maria Borodina |
| cc-given-name | Ім’я, вказане на платіжному інструменті (на кредитній картці) | Anna |
| cc-additional-name | Друге ім’я, вказане на платіжному інструменті (на кредитній картці) | Maria |
| cc-family-name | Прізвище, вказане на платіжному інструменті (на кредитній картці) | Borodina |
| cc-number | Код, що ідентифікує платіжний інструмент (номер кредитної картки) | 5324 9942 8758 6772 |
| cc-exp | Термін дії платіжного інструменту | 2028-01 |
| cc-exp-month | Місяць, до якого діє платіжний інструмент (кредитна картка) | 01 |
| cc-exp-year | Рік, до якого діє платіжний інструмент (кредитна картка) | 2028 |
| cc-csc | Код безпеки (CSC, CVC, CVV та інші) | 263 |
| cc-type | Тип платіжного інструменту | Visa, Mastercard |
| transaction-currency | Валюта, якій користувач віддає перевагу | UAH, USD и т д |
| transaction-amount | Сума платежу | 112.43 |
| language | Мова, якій користувач віддає перевагу | uk |
| bday | День народження | 1987-07-21 |
| bday-day | День народження | 21 |
| bday-month | Місяць народження | 07 |
| bday-year | Рік народження | 1987 |
| sex | Стать | Жіноча |
| url | веб-сторінка, що відповідає компанії, особі, адресі або контактній інформації в інших полях, пов’язаних із цим полем. | https://facedook.com/Thoutter |
| photo | Фотографія, значок або інше зображення, яке відповідає компанії або людині | |
| tel | Повний номер телефону, включаючи код країни | +38(065)1234-567 |
| tel-country-code | Код країни телефонного номера | +38 |
| tel-national | Телефонний номер без коду країни | 0651234567 |
| tel-area-code | Код зони телефонного номера з префіксом у країні, якщо модливо | 065 |
| tel-local | Номер телефону без компонентів коду країни та коду міста | 1234-567 |
| tel-local-prefix | Перша частина номера телефону, якщо телефон складається із двох частин | 1234 |
| tel-local-suffix | Друга частина телефону, якщо телефон складається з двох частин | 567 |
| tel-extension | Внутрішній код телефонного номера | 111 |
| Адреса електронної пошти | [email protected] | |
| impp | URL-адреса профілю в програмі обміну миттєвими повідомленнями | irc://example.org/borodina |
Слід зазначити, що ці поля можна використовувати у Contact Form 7, а й у звичайних HTML формах, створених вручну.
<form method=post action="purchase.php">
<input type="hidden" autocomplete="transaction-currency" value="USD">
<input type="hidden" autocomplete="transaction-amount" value="15.00">
<label>
Номер карты:
<input type="text" inputmode="numeric" autocomplete="cc-number">
</label>
<label>
Срок действия карты:
<input type="month" autocomplete="cc-exp">
</label>
<input type="submit" value="Дальше...">
</form>