Поле для введення пароля в HTML

Вивчаємо тип input password для створення прихованого поля введення пароля у HTML-формах.

Поле для введення пароля в HTML

Для створення поля, у якому введені символи приховуються, використовується тег input з атрибутом type="password".

type="password" — створює поле для введення пароля.
Введені символи відображаються у вигляді крапок або зірочок.
Таке поле використовується для паролів, PIN-кодів та секретних даних.

Приклад поля password

<form>

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

</form>

<form>

  <label>
    Email:
    <input 
      type="email"
      name="email"
    >
  </label>

  <br>

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

  <br>

  <input 
    type="submit"
    value="Увійти"
  >

</form>

Додаткові атрибути password

placeholder — показує підказку всередині поля.
value — задає початкове значення.
maxlength — обмежує максимальну кількість символів.
required — робить поле обов'язковим.

<input
  type="password"
  placeholder="Введіть пароль"
  maxlength="20"
  required
>

❗ Важливо:

Поле password лише приховує символи на екрані. Для безпеки справжні паролі повинні передаватися через HTTPS та правильно оброблятися на сервері.

Практичне завдання

📌 Завдання:

№1. Створіть форму входу.
№2. Додайте поле для email.
№3. Додайте поле password.
№4. Додайте кнопку для відправлення форми.

<!-- Початковий код -->

<form>

  <input type="email">

</form>

💡 Показати підказку

Для прихованого введення використовуйте input з type="password".

✅ Показати відповідь

<form>

  <label>
    Email:
    <input type="email">
  </label>

  <br>

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

  <br>

  <input
    type="submit"
    value="Увійти"
  >

</form>