<input type="password"> HTML-атрибут value

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

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

Попробуйте

<div>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
</div>

<div>
  <label for="pass">Password (8 characters minimum):</label>
  <input type="password" id="pass" name="password" minlength="8" required />
</div>

<input type="submit" value="Sign in" />

label {
  display: block;
}

input[type="submit"],
label {
  margin-top: 1rem;
}

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

Значение

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

Если задан атрибут pattern, содержимое элемента управления 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. Не добавляйте косые черты вокруг текста шаблона.

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

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

placeholder

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

Если содержимое элемента управления имеет одно направление письма (слева направо или справа налево), но подсказку нужно отобразить в противоположном направлении, можно использовать управляющие символы форматирования двунаправленного алгоритма Unicode, чтобы изменить направление текста подсказки. Подробнее см. в статье Как использовать управляющие символы Unicode для двунаправленного текста.

readonly

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

size

Атрибут 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

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

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

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

Результат

Техническая сводка

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

Совместимость с браузерами