Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як зробити <input> для введення пароля?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Щоб створити поле для введення пароля, використовується елемент `<input>` з атрибутом `type="password"`. Таке поле приховує введені символи, замінюючи їх крапками або зірочками, щоб ніхто не бачив пароль візуально. **Ключове:** приховування символів лише візуальне, а не шифрування, справжній захист має бути реалізований на сервері через HTTPS і хешування паролів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЩоб створити поле для введення пароля, використовується елемент `<input>` з атрибутом `type="password"`. Таке поле **приховує введені символи**, замінюючи їх крапками або зірочками, щоб ніхто не бачив пароль візуально. --- ### 1. Приклад базового поля пароля ```html <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. Як це працює Під час вводу користувач бачить: ```javascript •••••••• ``` Але браузер фактично передає введений текст як звичайний рядок (наприклад, `mypassword123`). Приховування - **лише візуальне**, не шифрування. --- ### 3. Часто використовувані атрибути | Атрибут | Призначення | Приклад | |---|---|---| | `name` | Ім'я поля (ключ для надсилання) | `name="password"` | | `placeholder` | Підказка | `placeholder="Введіть пароль"` | | `required` | Робить поле обов'язковим | `required` | | `minlength` / `maxlength` | Мінімум / максимум символів | `minlength="6" maxlength="20"` | | `autocomplete` | Дозволяє чи забороняє автозаповнення | `autocomplete="off"` | | `pattern` | Перевірка за шаблоном (регулярний вираз) | `pattern=".{6,}"` (не менше 6 символів) | Приклад з валідацією: ```html <input type="password" name="password" minlength="6" required placeholder="Не менше 6 символів"> ``` --- ### 4. Як додати "показати пароль" Можна зробити перемикач за допомогою JavaScript: ```html <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">` - це **поле, у якому введене видно лише користувачу**. Воно створює ілюзію "секретного" вводу і робить форму логіну візуально безпечною.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.