--- title: slug: Web/HTML/Element/Input/password tags: - Element - HTML - Веб - Пароль - Формы translation_of: Web/HTML/Element/input/password ---
{{HTMLRef}}

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

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

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

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

{{EmbedLiveSample("Basic_example", 600, 40)}}

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

Значения

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

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

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

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

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

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

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента {{HTMLElement("label")}}.

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

{{EmbedLiveSample("A_simple_password_input", 600, 40)}}

Поддержка автозаполнения

Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут {{htmlattrxref("autocomplete", "input")}}. Для паролей должно быть одно из следующих значений:

"on"
Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование "current-password" или "new-password".
"off"
Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.
"current-password"
Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем "on", так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.
"new-password"
Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».
<label for="userPassword">Пароль:</label>
<input id="userPassword" type="password" autocomplete="current-password">

{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}

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

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

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

{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}

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

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

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

{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}

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

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

<label for="pin">ПИН:</label>
<input id="pin" type="password" inputmode="numeric" minlength="4"
       maxlength="8" size="8">

{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}

Выделение текста

Как и другие элементы управления текстовой записью, вы можете использовать метод {{domxref("HTMLInputElement.select", "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();
}

Результат

{{EmbedLiveSample("Selecting_text", 600, 40)}}

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

Валидация

Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.

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

<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">

{{EmbedLiveSample("Validation_sample1", 600, 40)}}

{{htmlattrdef("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>

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

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

JavaScript

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

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

Результат

{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}

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

Спецификация Статус Комментарий
{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}} {{Spec2('HTML WHATWG')}} Начальное определение
{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}} {{Spec2('HTML5.1')}} Начальное определение

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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatGeckoDesktop("1.7")}} 2 1.0 1.0
accesskey 1.0 {{CompatVersionUnknown}} 6 1.0 {{CompatUnknown}}
autocomplete 17.0 {{CompatGeckoDesktop("2.0")}} 5 9.6 5.2
autofocus 5.0 {{CompatGeckoDesktop("2.0")}} 10 9.6 5.0
disabled 1.0 {{CompatGeckoDesktop("1.7")}}[4] 6 1.0 1.0
form 9.0 {{CompatGeckoDesktop("2.0")}} {{CompatUnknown}} 10.62 {{CompatUnknown}}
formaction 9.0 {{CompatGeckoDesktop("2.0")}} 10 10.62 5.2
formenctype 9.0 {{CompatGeckoDesktop("2.0")}} 10 10.62 {{CompatUnknown}}
formmethod 9.0 {{CompatGeckoDesktop("2.0")}} 10 10.62 5.2
formnovalidate 5.0[1] {{CompatGeckoDesktop("2.0")}} 10 10.62 {{CompatUnknown}}
formtarget 9.0 {{CompatGeckoDesktop("2.0")}} 10 10.62 5.2
inputmode {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
maxlength 1.0 {{CompatGeckoDesktop("1.7")}} 2 1.0 1.0
minlength 40.0 {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
name 1.0 {{CompatGeckoDesktop("1.7")}} 2 1.0 1.0
pattern 5.0 {{CompatGeckoDesktop("2.0")}} 10 9.6 {{CompatNo}}
placeholder 10.0 {{CompatGeckoDesktop("2.0")}} 10 11.00 5.0
readonly 1.0 {{CompatGeckoDesktop("1.7")}} 6[2] 1.0 1.0
required 5.0
10[3]		 {{CompatGeckoDesktop("2.0")}} 10 9.6 {{CompatNo}}
size 1.0 {{CompatGeckoDesktop("1.7")}} 2 1.0 1.0
Crossed out lock in address bar to indicate insecure login page Implementing something similar {{CompatGeckoDesktop("51")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Message displayed next to password field to indicate insecure login page, plus autofill disabled {{CompatNo}} {{CompatGeckoDesktop("52")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Chrome mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
accesskey {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
autocomplete {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
autofocus 3.2 {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
disabled {{CompatVersionUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
form {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
formaction {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} 10.62 5.0
formenctype {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
formmethod {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} 10.62 5.0
formnovalidate {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} 10.62 {{CompatUnknown}}
formtarget {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} 10.62 5.0
inputmode {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
maxlength {{CompatVersionUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
minlength {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} 27.0 {{CompatUnknown}}
name {{CompatVersionUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} 1.0
pattern {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
placeholder 2.3 {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} 11.10 4
required {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
size {{CompatVersionUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Crossed out lock in address bar to indicate insecure login page Implementing something similar {{CompatGeckoMobile("51")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Message displayed next to password field to indicate insecure login page, plus autofill disabled {{CompatNo}} {{CompatGeckoMobile("52")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

 

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

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

[3] Поддерживается для элемента {{HTMLElement("select")}}.

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