Поля ввода пароля (input type='password')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 23
Автор
Рек. время прохождения 5 минут
Упражнений 11
Комментарии 0
Тренажер HTML
На этой странице собраны практические задания для отработки навыков создания полей для ввода пароля в HTML. Вы научитесь использовать тег `<input>` с типом `password`, чтобы создавать безопасные поля, в которых вводимые символы скрываются. Задания охватывают как базовое создание поля, так и добавление различных атрибутов для улучшения функциональности и пользовательского опыта: плейсхолдеры, обязательное заполнение, ограничения по длине и даже проверку на соответствие шаблону. Каждое задание представляет собой небольшой фрагмент формы, который вам нужно будет дополнить, вписав недостающие части HTML-кода.
Список тем

Создание простого поля для пароля

id: 37845_password-field-01

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

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
.form-group {
  margin-bottom: 15px;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
}
HTML
<div class="form-container">
  <div class="form-group">
    <input input1="password">
  </div>
</div>
Для создания поля ввода пароля используется тег `<input>`. Чтобы символы скрывались, необходимо указать правильное значение для атрибута `type`. В данном случае, значением будет `password`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление текста-подсказки

id: 37845_password-field-02

Добавьте в поле для пароля временную подсказку 'Введите ваш пароль...'. Этот текст должен быть виден до того, как пользователь начнет ввод, и исчезать при фокусе или вводе текста.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
.form-group {
  margin-bottom: 15px;
}
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input[type="password"]:focus {
  outline: none;
  border-color: #007bff;
}
HTML
<div class="form-container">
  <div class="form-group">
    <input type="password" input1="Введите ваш пароль...">
  </div>
</div>
Для отображения временного текста-подсказки в полях ввода используется атрибут `placeholder`. Его значением должна быть строка с текстом подсказки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание метки с полем ввода

id: 37845_password-field-03

Свяжите текстовую метку `label` с полем ввода пароля. Это улучшает доступность формы и позволяет активировать поле, кликнув на текст метки.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<div class="form-container">
  <div class="form-group">
    <label input1="user-password">Пароль:</label>
    <input type="password" input2="user-password">
  </div>
</div>
Чтобы связать `<label>` и `<input>`, нужно задать полю уникальный идентификатор с помощью атрибута `id`, а затем указать это же значение в атрибуте `for` у метки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37845_password-field-04

Сделайте поле для ввода пароля обязательным для заполнения. Если пользователь попытается отправить форму с пустым полем, браузер должен вывести предупреждение.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<form>
  <label for="pass">Пароль:</label>
  <input type="password" id="pass" placeholder="Обязательный пароль" input1>
</form>
Для того чтобы сделать поле обязательным, достаточно добавить к тегу `<input>` булевый атрибут `required`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Минимальная длина пароля

id: 37845_password-field-05

Установите требование к минимальной длине пароля. Пароль должен содержать не менее 8 символов. Это базовая проверка, выполняемая браузером на стороне клиента.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<form>
  <label for="pass">Пароль (мин. 8 символов):</label>
  <input type="password" id="pass" input1="8">
</form>
Для установки минимального количества символов в поле ввода используется атрибут `minlength`. Его значением должно быть целое положительное число, в данном случае — 8.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Максимальная длина пароля

id: 37845_password-field-06

Ограничьте максимальное количество символов, которое можно ввести в поле пароля. Установите лимит в 16 символов. Пользователь не сможет физически ввести больше.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<div class="form-container">
  <label for="pass">Пароль (макс. 16 символов):</label>
  <input type="password" id="pass" input1="16">
</div>
Атрибут `maxlength` позволяет ограничить максимальную длину вводимого текста. Его значением должно быть число, соответствующее максимальному количеству символов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Диапазон длины пароля

id: 37845_password-field-07

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

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<form>
  <label for="pass">Пароль (8-16 символов):</label>
  <input type="password" id="pass" input1="8" input2="16">
</form>
Для задания диапазона длины используйте комбинацию атрибутов `minlength` для минимального значения и `maxlength` для максимального. Оба атрибута нужно добавить в один тег `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Проверка пароля по шаблону

id: 37845_password-field-08

Добавьте проверку пароля, разрешающую ввод только латинских букв и цифр. Используйте атрибут для проверки по <span class="cfb-tt-hover" data-title="Последовательность символов, которая задает шаблон поиска">регулярному выражению</span>. Подсказка для пользователя уже добавлена через атрибут `title`.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<form>
  <label for="pass">Пароль (буквы и цифры):</label>
  <input type="password" id="pass" input1="[a-zA-Z0-9]+" title="Пароль может содержать только латинские буквы и цифры">
</form>
Атрибут `pattern` позволяет задать шаблон для проверки вводимых данных. Регулярное выражение `[a-zA-Z0-9]+` означает 'один или более символов, которые являются либо буквой латинского алфавита, либо цифрой'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Шаблон с ограничением длины

id: 37845_password-field-09

Усложним задачу с шаблоном. Пароль должен состоять только из латинских букв и цифр, а его длина должна быть от 8 до 16 символов. Задайте это требование с помощью одного атрибута `pattern`.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<form>
  <label for="pass">Надежный пароль:</label>
  <input type="password" id="pass" pattern="input1" title="Пароль должен состоять из 8-16 латинских букв и цифр">
</form>
Используйте атрибут `pattern`. Регулярное выражение `[a-zA-Z0-9]{8,16}` объединяет проверку на допустимые символы (`[a-zA-Z0-9]`) и требование к длине (от 8 до 16 символов включительно - `{8,16}`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Неактивное (отключенное) поле

id: 37845_password-field-10

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

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}
HTML
<div class="form-container">
  <label for="pass">Неактивное поле:</label>
  <input type="password" id="pass" value="somepassword" input1>
</div>
Чтобы полностью отключить элемент формы, используется булевый атрибут `disabled`. Его достаточно просто добавить к тегу `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Управление автозаполнением

id: 37845_password-field-11

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

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.form-container {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<div class="form-container">
  <label for="new-pass">Придумайте новый пароль:</label>
  <input type="password" id="new-pass" input1="new-password">
</div>
Используйте атрибут `autocomplete` со значением `new-password`. Это стандартная подсказка для браузеров и менеджеров паролей при создании нового пароля.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру