<input type="password">

<input> элементы типа password предоставляют способ безопасного ввода пароля пользователем.

Элемент представлен как однострочный текстовый редактор, в котором текст скрыт, чтобы его нельзя было прочитать, обычно замещая каждый символ символом, например, звёздочкой ("*") или точкой ("•"). Этот символ будет отличаться в зависимости от браузера и операционной системы.

Точное поведение процесса ввода может отличаться в зависимости от браузера. Некоторые браузеры отображают набранный символ на мгновение перед его скрытием, в то время как другие позволяют пользователю переключать отображение обычного текста включить и выключить. Оба подхода помогают пользователю проверить, что они ввели нужный пароль, что особенно сложно на мобильных устройствах.

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

Если указан атрибут pattern, содержимое поля password считается допустимым только в том случае, если значение проходит проверку; см. Проверка для получения дополнительной информации.

Помимо атрибутов, которые работают со всеми элементами <input> независимо от их типа, поля ввода пароля поддерживают следующие атрибуты.

Максимальная длина строки (измеряется в единицах UTF-16) символов, которые пользователь может ввести в поле ввода пароля. Это должно быть целое число, равное 0 или больше. Если атрибут maxlength не указан или указано недопустимое значение, поле ввода пароля не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength.

Ввод не пройдет валидацию ограничений, если длина введённого текста превышает maxlength единиц UTF-16. Валидация ограничений применяется только при изменении значения пользователем.

Минимальная длина строки (измеряется в единицах UTF-16), которую пользователь может ввести в поле ввода пароля. Это должно быть неотрицательное целое число, меньшее или равное значению, указанному в maxlength. Если атрибут minlength не указан или указано недопустимое значение, поле ввода пароля не имеет минимальной длины.

Ввод не пройдет валидацию ограничений, если длина введённого текста меньше, чем minlength единиц UTF-16. Валидация ограничений применяется только при изменении значения пользователем.

Атрибут pattern, при указании, представляет собой регулярное выражение, которому должно соответствовать значение value ввода для успешной валидации ограничений. Оно должно быть допустимым регулярным выражением JavaScript, как используется типом RegExp, и как описано в нашем руководстве по регулярным выражениям; при компиляции регулярного выражения используется флаг 'u', поэтому шаблон обрабатывается как последовательность кодов Юникода, а не как ASCII. Перед текстом шаблона не должны указываться слэши.

Если указанный шаблон не указан или некорректен, не применяется никакого регулярного выражения, и этот атрибут полностью игнорируется.

Использование шаблона настоятельно рекомендуется для полей ввода пароля, чтобы помочь гарантировать, что пользователи выбирают и используют допустимые пароли, использующие широкий спектр классов символов. С помощью шаблона вы можете задавать правила для регистра символов, требовать использования определённого количества цифр и/или знаков препинания и так далее. Подробности и пример см. в разделе Проверка.

Атрибут placeholder — это строка, которая предоставляет краткое напоминание пользователю о том, какой тип информации ожидается в поле. Это должно быть слово или короткая фраза, которая демонстрирует ожидаемый тип данных, а не пояснительное сообщение. Текст не должен содержать символы перевода строки или возврата каретки.

Если у элемента есть одна направленность (LTR или RTL), но необходимо отобразить подпись в противоположной направленности, можно использовать символы форматирования алгоритма двунаправленного отображения Юникода, чтобы переопределить направленность в подписи; см. Как использовать символы Юникода для двунаправленного текста для получения дополнительной информации.

Булевый атрибут, который, если присутствует, означает, что это поле не может быть отредактировано пользователем. Однако его value все еще можно изменить с помощью кода JavaScript, который напрямую устанавливает значение свойства HTMLInputElement.value.

Атрибут size — это числовое значение, указывающее, какой ширины в символах должно быть поле ввода. Значение должно быть числом, большим нуля, а значение по умолчанию — 20. Поскольку ширина символов варьируется, это может быть не точно и на это не следует полагаться; результирующее поле ввода может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (font настройки, используемые в браузере).

Это не устанавливает ограничения на количество символов, которые пользователь может ввести в поле. Это только приблизительно указывает, сколько символов можно увидеть одновременно. Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength.

Поля ввода пароля, как правило, работают так же, как и другие поля ввода текста; основное различие заключается в скрытии содержимого для предотвращения чтения пароля лицами, находящимися рядом с пользователем.

Здесь мы видим самое базовое поле ввода пароля, с меткой, созданной с помощью элемента <label>.

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

Чтобы менеджер паролей пользователя мог автоматически ввести пароль, укажите атрибут autocomplete. Для паролей это обычно должно быть одно из следующих значений:

on

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

off

Не разрешать браузеру или менеджеру паролей автоматически заполнить поле пароля. Обратите внимание, что некоторые программы игнорируют это значение, поскольку это обычно вредно для способности пользователей соблюдать безопасную практику управления паролями.

current-password

Разрешить браузеру или менеджеру паролей ввести текущий пароль для сайта. Это предоставляет больше информации, чем on, так как позволяет браузеру или менеджеру паролей автоматически ввести известный пароль для сайта в поле, но не предложить новый.

new-password

Разрешить браузеру или менеджеру паролей автоматически ввести новый пароль для сайта; это используется в формах «изменить пароль» и «новый пользователь» в поле, где пользователь вводит новый пароль. Новый пароль может быть сгенерирован различными способами, в зависимости от используемого менеджера паролей. Он может заполнить новое предложенное значение пароля или показать пользователю интерфейс для его создания.

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

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

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Если рекомендуемые (или обязательные) правила синтаксиса пароля требуют альтернативного интерфейса ввода, отличного от стандартной клавиатуры, вы можете использовать атрибут 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">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

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

Результат

Вы также можете использовать selectionStart и selectionEnd для получения (или установки) диапазона символов в элементе управления, которые в настоящее время выделены, и selectionDirection, чтобы узнать, в каком направлении произошло выделение (или будет расширено, в зависимости от вашей платформы; см. документацию для пояснения). Однако, учитывая, что текст скрыт, полезность этих методов ограничена.

Если ваше приложение имеет ограничения на набор символов или другие требования к фактическому содержимому введённого пароля, вы можете использовать атрибут pattern, чтобы установить регулярное выражение, которое будет использоваться для автоматической проверки соответствия ваших паролей этим требованиям.

В этом примере допустимы только значения, состоящие как минимум из четырёх и не более восьми шестнадцатеричных цифр.

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Enter an ID consisting of 4-8 hexadecimal digits"
  autocomplete="new-password" />

В этом примере принимаются только значения, соответствующие формату действительного номера социального страхования США. Эти номера, используемые для налогообложения и идентификации в США, имеют вид "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">Value:</label>
<span id="current"></span>

Здесь используется pattern, который ограничивает вводимое значение строками, представляющими законные номера социального страхования. Очевидно, что эта регулярка не гарантирует действительность номера социального страхования (поскольку у нас нет доступа к базе данных Администрации социального страхования), но она гарантирует, что номер может быть действительным; в общем случае она избегает значений, которые не могут быть действительными. Кроме того, она допускает разделение трёх групп цифр пробелом, дефисом ("-") или без разделителей.

Атрибут inputmode установлен в значение numeric, чтобы поощрить устройства с виртуальными клавиатурами переключаться на числовую раскладку для более удобного ввода. Атрибуты minlength и maxlength установлены соответственно в значения 9 и 12, чтобы потребовать, чтобы значение содержало как минимум девять и не более 12 символов (первое значение без разделителей между группами цифр, а второе — с ними). Атрибут required используется для обозначения того, что у этого элемента управления должно быть значение. Наконец, autocomplete установлен в off, чтобы избежать попыток менеджеров паролей и функций восстановления сеанса установить его значение, поскольку это вообще не пароль.

JavaScript

Это просто код для отображения введённого номера социального страхования на экране. Очевидно, что это нарушает назначение поля пароля, но полезно для экспериментов с pattern.

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

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

Результат

• Совместимость свойств CSS