Як зробити <input> для введення пароля?
Щоб створити поле для введення пароля, використовується елемент <input> з атрибутом
type="password".
Таке поле приховує введені символи, замінюючи їх крапками або зірочками, щоб ніхто не бачив пароль візуально.
1. Приклад базового поля пароля
<form action="/login" method="post">
<label for="pass">Пароль:</label>
<input type="password" id="pass" name="password" placeholder="Введіть пароль">
<button type="submit">Увійти</button>
</form>Що тут відбувається:
type="password"- робить символи невидимими під час вводу;name="password"- ім'я поля (надсилається на сервер під час сабміту форми);placeholder- підказка всередині поля;idіlabelпов'язують підпис і поле вводу.
2. Як це працює
Під час вводу користувач бачить:
••••••••Але браузер фактично передає введений текст як звичайний рядок (наприклад, mypassword123).
Приховування - лише візуальне, не шифрування.
3. Часто використовувані атрибути
| Атрибут | Призначення | Приклад |
|---|---|---|
name | Ім'я поля (ключ для надсилання) | name="password" |
placeholder | Підказка | placeholder="Введіть пароль" |
required | Робить поле обов'язковим | required |
minlength / maxlength | Мінімум / максимум символів | minlength="6" maxlength="20" |
autocomplete | Дозволяє чи забороняє автозаповнення | autocomplete="off" |
pattern | Перевірка за шаблоном (регулярний вираз) | pattern=".{6,}" (не менше 6 символів) |
Приклад з валідацією:
<input type="password" name="password" minlength="6" required placeholder="Не менше 6 символів">4. Як додати "показати пароль"
Можна зробити перемикач за допомогою JavaScript:
<input type="password" id="password" placeholder="Введіть пароль">
<input type="checkbox" id="show"> Показати пароль
<script>
document.getElementById('show').addEventListener('change', function() {
const input = document.getElementById('password');
input.type = this.checked ? 'text' : 'password';
});
</script>Тепер під час натискання на чекбокс тип поля перемикається між password і text.
5. Безпека
- Символи приховані лише на екрані, не під час передачі, захист має бути реалізований на сервері (через HTTPS і хешування паролів).
- Ніколи не зберігайте введені паролі у відкритому вигляді.
Підсумок:
| Властивість | Значення |
|---|---|
| Тег | <input type="password"> |
| Призначення | Поле для безпечного введення пароля |
| Символи під час вводу | Приховані (крапки / зірочки) |
| Часто використовувані атрибути | required, minlength, autocomplete="off", placeholder |
| Безпека | Візуальне приховування; справжній захист - на боці сервера |
Простими словами:
<input type="password"> - це поле, у якому введене видно лише користувачу.
Воно створює ілюзію "секретного" вводу і робить форму логіну візуально безпечною.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.