Формы: взаимодействие с input, textarea, select, button

Введение в работу с формами 🏗️

Формы — это мост между пользователем и вашим приложением. Они позволяют собирать данные, отправлять запросы и взаимодействовать с сервером. Сегодня разберём ключевые элементы: input, textarea, select и button — и научимся управлять ими через JavaScript.

Элемент `input`: основа любого поля ввода 📝

<input> — базовый элемент для ввода текста, чисел, паролей и других данных. Вот как можно с ним работать:

const nameInput = document.querySelector('#username');

// Получаем значение поля
console.log(nameInput.value);

// Устанавливаем значение
nameInput.value = 'Данила Бежин';

// Обработчик события изменения
nameInput.addEventListener('input', (event) => {
  console.log('Пользователь ввёл:', event.target.value);
});

💡 Совет: Используйте event.target внутри обработчиков, чтобы получить доступ к элементу, вызвавшему событие.

`textarea`: многострочный ввод 📜

Отличается от input возможностью вводить текст с переносами строк:

const commentField = document.querySelector('#comment');

// Получаем и устанавливаем текст
commentField.value = 'Привет!\nЭто многострочный текст.';

// Ограничиваем количество символов
commentField.maxLength = 500;

Работаем с `select`: выпадающие списки 🗂️

Элемент <select> позволяет выбирать один или несколько вариантов из списка:

const countrySelect = document.querySelector('#country');

// Получаем выбранное значение
console.log(countrySelect.value);

// Устанавливаем значение
countrySelect.value = 'ru';

// Получаем выбранный элемент (option)
const selectedOption = countrySelect.options[countrySelect.selectedIndex];
console.log(selectedOption.text);

Кнопки (`button`) и обработка отправки формы ✨

Кнопки не только отправляют формы, но и могут выполнять любые действия:

const submitButton = document.querySelector('#submit');

// Обработчик клика
submitButton.addEventListener('click', (event) => {
  event.preventDefault(); // Отменяем стандартное поведение
  console.log('Форма не отправилась, но мы обработали клик!');
});

⚠️ Важно: Всегда используйте preventDefault() при самостоятельной обработке отправки формы, чтобы страница не перезагружалась.

Собираем данные формы целиком 📦

Часто нужно получить все данные формы разом. Делаем это через объект FormData:

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(form);
  const data = Object.fromEntries(formData.entries());

  console.log('Данные формы:', data);
});

Валидация данных: делаем формы умнее 🔍

Проверяем данные перед отправкой:

const emailInput = document.querySelector('#email');

emailInput.addEventListener('blur', () => {
  if (!emailInput.value.includes('@')) {
    emailInput.style.borderColor = 'red';
    console.error('Некорректный email!');
  }
});

Динамическое управление элементами формы 🎮

JavaScript позволяет менять форму «на лету»:

// Добавляем новый вариант в select
const newOption = new Option('Казахстан', 'kz');
countrySelect.add(newOption);

// Отключаем кнопку при невалидных данных
submitButton.disabled = !form.checkValidity();

Итоги и что дальше? 🚀

Теперь вы знаете, как:

Работать с основными элементами форм.
Обрабатывать пользовательский ввод.
Собирать и валидировать данные.
Динамически управлять формой.

Формы: взаимодействие с input, textarea, select, button

Введение в работу с формами 🏗️

Элемент input: основа любого поля ввода 📝

textarea: многострочный ввод 📜

Работаем с select: выпадающие списки 🗂️

Кнопки (button) и обработка отправки формы ✨