<input type="password">

Елементи <input> типу password надають користувачам змогу безпечно вводити паролі.

Цей елемент виводиться як простий однорядковий контрольний елемент для редагування тексту, в якому текст прихований так, що не може бути прочитаний, зазвичай шляхом заміни кожного символу іншим знаком, наприклад, зірочкою ("*") або крапкою ("•"). Конкретний знак залежить від користувацького агента та операційної системи.

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

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

[!NOTE] Усі форми, що містять чутливу інформацію штибу паролів (наприклад, форми входу), повинні передаватися по HTTPS. Нині чимало браузерів має реалізацію механізмів попередження про незахищені форми входу; дивіться Незахищені паролі.

Значення

Атрибут value містить рядок, чиє значення – поточний вміст контрольного елементу редагування тексту, що використовується для введення пароля. Якщо користувач іще нічого не ввів, то таким значенням є порожній рядок (""). Якщо задано властивість required, то поле редагування пароля повинно містити значення, відмінне від порожнього рядка, аби бути дійсним.

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

[!NOTE] Символи розриву рядка (U+000A) та повернення каретки (U+000D) – не дозволені в значенні поля password. При заданні значення контрольного елемента пароля ці символи вирізаються.

Додаткові атрибути

На додачу до атрибутів, що діють на всіх елементах <input>, незалежно від їх типу, поля паролів приймають наступні.

maxlength

Найбільша довжина рядка (у кодових одиницях UTF-16), котрий користувач може ввести в поле пароля. Це повинно бути ціле число, не менше 0. Якщо maxlength не задано, або якщо задано з недійсним значенням, то поле пароля не має максимальної довжини. Це значення також повинно бути більше або дорівнювати значенню minlength.

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

minlength

Найменша довжина рядка (у кодових одиницях UTF-16), котрий користувач може ввести в поле пароля. Це повинно бути невід'ємне ціле числове значення, менше або рівне значенню, заданому maxlength. Якщо minlength не задано, або якщо задано з недійсним значенням, то поле пароля не має мінімальної довжини.

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

pattern

Атрибут pattern, коли заданий, є регулярним виразом, котрому повинно відповідати value, аби пройти валідацію обмежень. Це повинен бути дійсний регулярний вираз JavaScript, штибу виразів, що використовуються типом RegExp, і тих, що задокументовані в нашому посібнику з регулярних виразів; при збиранні регулярного виразу використовується позначка 'u', тож патерн розглядається як послідовність кодових одиниць Unicode, а не ASCII. На кінцях тексту патерну не повинно бути скісних рисок.

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

[!NOTE] Використовуйте атрибут title, аби задати текст, котрий більшість браузерів покаже як підказку, що пояснить вимоги для відповідності патернові. Також слід додати поруч іще якийсь пояснювальний текст.

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

placeholder

Атрибут placeholder (заповнювач) – це рядок, що надає користувачам стислу підказку щодо того, якого роду інформація очікується в полі. Це повинно бути слово або коротка фраза, що демонструє очікуваний тип даних, а не пояснювальне повідомлення. Текст значення не повинен містити повернень каретки та розривів рядка.

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

[!NOTE] Слід уникати використання атрибута placeholder, якщо це можливо. Він не так корисний семантично, як інші способи пояснення форми, і може призводити до неочікуваних технічних проблем зі вмістом. Дивіться більше про це в Підписах <input>.

readonly

Булів атрибут, котрий, якщо є, означає, що поле не може редагуватися користувачем. Проте його value все ж може бути змінено з коду JavaScript, шляхом безпосереднього задання значення властивості HTMLInputElement.value.

[!NOTE] У зв'язку з тим, що доступне лише для прочитання поле не може мати значення, атрибут required ніяк не діє на поля, на котрих також задано readonly.

size

Атрибут size (розмір) – це числове значення, що вказує на те, скільки символів завширшки повинно бути поле. Це значення повинно бути числом, більшим за нуль, а усталене значення – 20. Оскільки ширина у символів різна, цей розмір може бути, а може й не бути точним, і на нього не слід покладатися; результівне поле може бути вужчим або ширшим за задану кількість символів, залежно від самих символів та шрифту (застосованих налаштувань font).

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

Застосування полів пароля

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

Просте поле пароля

Тут – найпростіше поле пароля, з підписом, заданим за допомогою елемента <label>.

<label for="userPassword">Пароль: </label>
<input id="userPassword" type="password" />

Дозвіл на самозаповнення

Щоб дозволити менеджерові паролів користувача автоматично ввести пароль, слід задати атрибут autocomplete. Для паролів значенням повинно бути щось із наступного:

on

Дозволити браузерові або менеджерові паролів автоматично вписати пароль. Це не так інформативно, як використання current-password або new-password.

off

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

current-password

Дозволити браузерові або менеджерові паролів увести поточний пароль до сайту. Це дає більше інформації, ніж on, адже дає браузерові або менеджерові паролів змогу автоматично ввести в поле наразі відомий пароль до сайту, а не пропонувати новий.

new-password

Дозволити браузерові або менеджерові паролів автоматично ввести новий пароль для сайту; це використовується в формах "зміни пароля" та "створення користувача", на полі, що просить в користувача новий пароль. Такий новий пароль може бути згенерований у чимало способів, залежно від менеджера паролів. Він може бути зразу введений, а може бути показаний інтерфейс для створення пароля.

<label for="userPassword">Пароль:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Обов'язковість пароля

Аби сказати браузерові користувача, що поле пароля повинно мати дійсне значення, щоб форма була подана, слід задати булів атрибут required.

<label for="userPassword">Пароль: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Надіслати" />

Задання режиму введення

Якщо для ваших бажаних (або обов'язкових) правил синтаксису паролів краще підійшов би альтернативний інтерфейс введення тексту, ніж стандартна клавіатура, то можна використати для запиту на такий спосіб атрибут inputmode. Найочевидніша ситуація для його використання – пароль, що повинен бути числовим (наприклад, як PIN-код). Мобільні пристрої з віртуальними клавіатурами, наприклад, можуть вирішити перейти на цифрову клавіатуру замість повної, аби зробити введення пароля легшим. Якщо PIN-код є одноразовим, задайте атрибут autocomplete зі значенням off або one-time-code, щоб його збереження не відбувалося.

<label for="pin">PIN-код: </label>
<input id="pin" type="password" inputmode="numeric" />

Задання вимог щодо довжини

Як зазвичай, можна використати для задання мінімальної та максимальної прийнятних довжин пароля атрибути minlength і maxlength. Цей приклад розширює попередній, додавши, що PIN-код користувача повинен містити щонайменше чотири й не більше восьми цифр. Атрибут size використовується, щоб пересвідчитися, що контрольний елемент для введення пароля – вісім символів завширшки.

<label for="pin">PIN-код:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Вибирання тексту

Як і з іншими контрольними елементами введення тексту, можна використовувати метод select(), аби вибрати ввесь текст у полі пароля.

HTML

<label for="userPassword">Пароль: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Вибрати все</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
};

Результат

Також можна використати selectionStart і selectionEnd – аби з'ясувати (або задати), який уривок символів у контрольному елементі наразі вибрано, а також selectionDirection – щоб дізнатися, в якому напрямку відбулося вибирання (або в якому напрямку воно буде продовжено, залежно від платформи; дивіться пояснення у відповідній документації). Проте враховуючи те, що текст приховано, корисність таких можливостей – дещо обмежена.

Валідація

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

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

<label for="hexId">Шістнадцятковий ідентифікатор: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Уведіть ідентифікатор, що складається з 4-8 шістнадцяткових цифр"
  autocomplete="new-password" />

Приклади

Запит на номер Соціального страхування (SSN)

Цей приклад приймає лише введення, що відповідає форматові дійсних номерів Соціального страхування (SSN) Сполучених штатів. Ці числа, що використовуються в США для оподаткування та встановлення особи, мають форму "123-45-6789". Також існують різні правила щодо того, які значення дозволені в кожній групі цифр.

HTML

<label for="ssn">SSN:</label>
<input
  type="password"
  id="ssn"
  inputmode="numeric"
  minlength="9"
  maxlength="12"
  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
  required
  autocomplete="off" />
<br />
<label for="ssn">Значення:</label>
<span id="current"></span>

Цей приклад використовує pattern, що обмежує введене значення рядками, що представляють прийнятні номери Соціального страхування. Очевидно, що цей регулярний вираз не гарантує дійсного SSN (адже немає доступу до бази даних Адміністрації Соціального страхування), але він перевіряє, що введене число може бути SSN; загалом це запобігає значенням, що не можуть бути дійсними. Крім цього, він дозволяє, щоб три групи цифр були розділені пробілами, дефісами ("-"), або взагалі нічим.

Атрибут inputmode має значення numeric, аби заохочувати пристрої з віртуальними клавіатурами до переходу на цифровий варіант, для легшого введення. Атрибути minlength і maxlength мають значення 9 і 12 відповідно, щоб вимагати, аби значення було щонайменше 9 і щонайбільше 12 символів завдовжки (перше значення – для випадку без розділювачів груп цифр, і друге – з ними). Атрибут required використовується для позначення того, що цей контрольний елемент повинен мати значення. Врешті-решт, autocomplete має значення off, аби не дати менеджерам паролів та функціональності відновлення сесії намагатися вписати значення, адже це значення – взагалі не пароль.

JavaScript

Це лишень трохи простого коду для виведення введеного SSN на екран, щоб його було видно. Зрозуміло, що це позбавляє змісту поле пароля, але корисно для дослідів з pattern.

const ssn = document.getElementById("ssn");
const current = document.getElementById("current");

ssn.oninput = (event) => {
  current.textContent = ssn.value;
};

Результат

Технічний підсумок

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

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

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

• Сумісність властивостей CSS