Чтение значений полей ввода
Получайте значения из текстовых полей, флажков и списков выбора.
«Чтение значений полей ввода» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Работа с данными формы
Формы собирают вводимые пользователем данные через такие поля, как текстовые поля, флажки, переключатели и раскрывающиеся списки. Каждое из них предоставляет данные немного по-своему.
input.value
Поля ввода, работающие с текстом, предоставляют своё текущее содержимое через свойство value, которое всегда имеет строковый тип.
const name = document.querySelector("#name");
console.log(name.value);value всегда является строкой
Даже поля для чисел возвращают строку. Явно преобразуйте её, когда Вам нужно число.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Поля для чисел и дат поддерживают valueAsNumber и напрямую возвращают число (либо значение «не число», если поле пусто или содержит недопустимые данные).
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Флажки сообщают своё состояние через логическое свойство checked, а не через value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseПереключатели
В группе переключателей найдите выбранный элемент. Свойство checked определяет выбранный вариант.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");Значение select
Раскрывающийся список с одним вариантом предоставляет выбранный вариант через свойство value.
const country = document.querySelector("#country");
console.log(country.value);Множественный выбор
Для списка с множественным выбором получите selectedOptions и преобразуйте его элементы в значения.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);Событие ввода
Слушайте событие input, чтобы реагировать на каждый введённый символ или изменение в реальном времени.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});Событие изменения
Событие change срабатывает, когда поле теряет фокус после изменения значения, или сразу для флажков и раскрывающихся списков.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData сразу собирает все именованные поля формы, что особенно удобно для отправки на сервер.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Быстрая проверка
Прочитайте значение флажка правильным способом.
Итоги
Читайте значения текстовых полей через value (это всегда строка; для чисел используйте valueAsNumber), а значения флажков и переключателей — через checked. Для раскрывающихся списков используйте value или selectedOptions. Реагируйте на событие input (каждое изменение) или change (после подтверждения), а все данные сразу собирайте с помощью FormData.
Часто задаваемые вопросы
Урок «Чтение значений полей ввода» бесплатный?
Да — полный текст урока «Чтение значений полей ввода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Чтение значений полей ввода»?
Получайте значения из текстовых полей, флажков и списков выбора. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Чтение значений полей ввода»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Чтение значений полей ввода
- Событие submit
- Проверка данных на стороне клиента
- API проверки ограничений