<input type="password">

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

<input> элементы типа "password" предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от user agent и OS.

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

Любые формы, содержащие конфиденциальную информацию, такую ​​как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. Небезопасные пароли. Другие браузеры также реализуют аналогичные механизмы.

<input id="userPassword" type="password">

Value DOMString представляет пароль или пустую строку
События change и input
Общие поддерживаемые атрибуты autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size
IDL атрибуты selectionStart, selectionEnd, selectionDirection, и value
Методы select(), setRangeText(), и setSelectionRange()

Значения

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

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

Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля "password". При вставке пароля, возвращаемые символы удаляются из значения.

Использование полей ввода пароля

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

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

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента <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">

Обязательное заполнение пароля

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

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

Указание режима ввода

Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

<label for="pin">ПИН:</label>
<input id="pin" type="password" inputmode="numeric">

Настройка длины пароля

Как обычно, вы можете использовать атрибуты minlength и maxlength, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

<label for="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 = function(event) {
  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">

disabled

Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.

Примеры

Запрос номера социального страхования

В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединенных Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

HTML

<label for="ssn">SSN:</label>
<input type="password" id="ssn" inputmode="number" 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 , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.

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

JavaScript

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

ssn.oninput = function(event) {
  current.innerHTML = ssn.value;
}

Результат

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

Спецификация Статус Комментарий
HTML Living Standard
Определение '<input type="password">' в этой спецификации.
Живой стандарт Начальное определение
HTML 5.1
Определение '<input type="password">' в этой спецификации.
Рекомендация Начальное определение

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 или ранее) 2 1.0 1.0
accesskey 1.0 (Да) 6 1.0 ?
autocomplete 17.0 4.0 (2.0) 5 9.6 5.2
autofocus 5.0 4.0 (2.0) 10 9.6 5.0
disabled 1.0 1.0 (1.7 или ранее)[4] 6 1.0 1.0
form 9.0 4.0 (2.0) ? 10.62 ?
formaction 9.0 4.0 (2.0) 10 10.62 5.2
formenctype 9.0 4.0 (2.0) 10 10.62 ?
formmethod 9.0 4.0 (2.0) 10 10.62 5.2
formnovalidate 5.0[1] 4.0 (2.0) 10 10.62 ?
formtarget 9.0 4.0 (2.0) 10 10.62 5.2
inputmode Нет Нет Нет Нет Нет
maxlength 1.0 1.0 (1.7 или ранее) 2 1.0 1.0
minlength 40.0 ? ? ? ?
name 1.0 1.0 (1.7 или ранее) 2 1.0 1.0
pattern 5.0 4.0 (2.0) 10 9.6 Нет
placeholder 10.0 4.0 (2.0) 10 11.00 5.0
readonly 1.0 1.0 (1.7 или ранее) 6[2] 1.0 1.0
required 5.0
10[3]
4.0 (2.0) 10 9.6 Нет
size 1.0 1.0 (1.7 или ранее) 2 1.0 1.0
Crossed out lock in address bar to indicate insecure login page Implementing something similar 51 (51) ? ? ?
Message displayed next to password field to indicate insecure login page, plus autofill disabled Нет 52 (52) Нет Нет Нет
Feature Chrome mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) 4.0 (2.0) (Да) (Да) (Да)
accesskey ? ? ? ? ?
autocomplete ? 4.0 (2.0) (Да) (Да) (Да)
autofocus 3.2 4.0 (2.0) ? (Да) ?
disabled (Да) 4.0 (2.0) (Да) (Да) (Да)
form ? ? ? ? ?
formaction ? 4.0 (2.0) ? 10.62 5.0
formenctype ? ? ? ? ?
formmethod ? 4.0 (2.0) ? 10.62 5.0
formnovalidate ? 4.0 (2.0) ? 10.62 ?
formtarget ? 4.0 (2.0) ? 10.62 5.0
inputmode Нет Нет Нет Нет Нет
maxlength (Да) 4.0 (2.0) (Да) (Да) (Да)
minlength ? ? ? 27.0 ?
name (Да) 4.0 (2.0) (Да) (Да) 1.0
pattern ? 4.0 (2.0) ? (Да) (Да)
placeholder 2.3 4.0 (2.0) ? 11.10 4
required ? (Да) ? (Да) ?
size (Да) 4.0 (2.0) (Да) (Да) (Да)
Crossed out lock in address bar to indicate insecure login page Implementing something similar 51.0 (51) ? ? ?
Message displayed next to password field to indicate insecure login page, plus autofill disabled Нет 52.0 (52) Нет Нет Нет

 

[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.

[2] Отсутствует для type="checkbox" и type="radio".

[3] Поддерживается для элемента <select>.

[4] Firefox, в отличие от других браузеров, по умолчанию pсохраняет состояние динамического отключения и (если применимо) динамическую проверку из <input> для загрузки страницы. Установка значения атрибута autocomplete в off отключает эту функцию; это работает, даже если атрибут autocomplete обычно не применяется к <input> в силу его type. Смотри баг 654072.

Метки документа и участники

 Внесли вклад в эту страницу: Goodzonchik
 Обновлялась последний раз: Goodzonchik,