• Теория
  • Теория

Свойство type

Мяу! У меня есть гипотеза: если сделать удобную форму регистрации, посетители будут регистрироваться чаще. Надо проверить.

Кекс подкинул новую задачу. Нужно доработать страницу регистрации на новостном сайте. На странице есть поля для ввода логина и пароля, а также кнопка «Зарегистрироваться». Кекс хочет, чтобы пользователи могли по желанию увидеть пароль, который вводят. Также нужно запрограммировать шкалу сложности пароля, которая будет напоминать пользователям, что лучше придумать пароль подлиннее.

Начнём с показа пароля. Для ввода пароля используется специальное поле с типом password:

<input class="password" type="password" required>

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

Пароль маскируют, чтобы никто не мог его подсмотреть. Но набирать его при этом становится сложнее — можно ошибиться и не заметить. Если пользователь уверен, что за ним не подглядывают, и хочет убедиться, что не опечатался, то нужно дать ему возможность увидеть пароль.

Чтобы показать пароль, поле ввода пароля превращают в текстовое поле ввода. Для этого его тип изменяют на text. За тип в JavaScript отвечает свойство type. Чтобы изменить тип поля ввода, нужно записать в свойство type новое значение:

let input = document.querySelector('input');

// Сделаем input текстовым полем ввода
input.type = 'text';

Поле для ввода пароля имеет класс password. Найдём его, запишем в переменную и сделаем обычным текстовым полем.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Динамические стили элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.