Формы и пользовательский ввод

Формы — главный способ получить информацию от пользователя. Логин, поиск, добавление задачи — везде форма. Научимся читать значения полей, перехватывать отправку и проверять данные до того, как их куда-то отправить.

📝 Читаем и записываем значения полей

Текстовое поле <input> — это DOM-элемент. Его текущее значение хранится в свойстве .value. Можно как прочитать (что ввёл пользователь), так и записать (подставить значение программно).

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

// Читаем значение
console.log(input.value); // что сейчас в поле

// Записываем значение
input.value = 'Иван';  // подставляем текст

// Очищаем поле
input.value = '';

// Trim убирает лишние пробелы по краям
const clean = input.value.trim();

🎛️ Типы полей и как с ними работать

Разные типы полей — разный способ получить значение.

input.value // строка

checkbox.checked // true или false

document.querySelector(
  'input[name="color"]:checked'
).value

select.value // выбранное значение

// Чтение разных типов полей
const textInput = document.querySelector('#name');
const numberInput = document.querySelector('#age');
const checkbox = document.querySelector('#agree');

console.log(textInput.value);       // строка: 'Иван'
console.log(numberInput.value);     // СТРОКА: '25' (не число!)
console.log(Number(numberInput.value)); // число: 25
console.log(checkbox.checked);      // boolean: true или false

📤 Событие submit и preventDefault

Когда пользователь нажимает кнопку «Отправить» или Enter в поле формы — срабатывает событие submit. По умолчанию браузер отправляет форму и перезагружает страницу. Нам это почти никогда не нужно в современных приложениях — поэтому всегда вызываем event.preventDefault().

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

form.addEventListener('submit', (event) => {
  event.preventDefault(); // отменяем стандартную отправку!

  // Теперь читаем данные и делаем что нужно
  const name = form.querySelector('#name').value.trim();
  const email = form.querySelector('#email').value.trim();

  console.log('Имя:', name);
  console.log('Email:', email);
});

🛡️ Валидация перед отправкой

Валидация — проверка данных на корректность перед отправкой. Это защищает сервер от мусора и помогает пользователю заполнить форму правильно.

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

  const name = document.querySelector('#name').value.trim();
  const age = Number(document.querySelector('#age').value);
  const agree = document.querySelector('#agree').checked;

  // Массив ошибок
  const errors = [];

  if (name.length < 2) {
    errors.push('Имя должно содержать минимум 2 символа');
  }

  if (isNaN(age) || age < 0 || age > 120) {
    errors.push('Введите корректный возраст (0–120)');
  }

  if (!agree) {
    errors.push('Необходимо принять условия');
  }

  if (errors.length > 0) {
    // Показываем ошибки пользователю
    const errorBlock = document.querySelector('#errors');
    errorBlock.innerHTML = errors.map(e => `<p>${e}</p>`).join('');
    return; // прекращаем выполнение
  }

  // Всё ок — отправляем данные
  console.log('Данные валидны, отправляем:', { name, age });
});

💻 Полный пример: форма добавления задачи

// HTML:
// <form id="taskForm">
//   <input type="text" id="taskInput" placeholder="Задача..." />
//   <select id="priority">
//     <option value="low">Низкий</option>
//     <option value="high">Высокий</option>
//   </select>
//   <button type="submit">Добавить</button>
// </form>
// <ul id="taskList"></ul>

const form = document.querySelector('#taskForm');
const taskInput = document.querySelector('#taskInput');
const prioritySelect = document.querySelector('#priority');
const taskList = document.querySelector('#taskList');

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

  const text = taskInput.value.trim();
  const priority = prioritySelect.value;

  if (!text) {
    taskInput.style.borderColor = 'rgba(220, 50, 50, 1)';
    return;
  }

  taskInput.style.borderColor = '';

  // Создаём элемент задачи
  const li = document.createElement('li');
  li.textContent = `[${priority}] ${text}`;

  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '✕';
  deleteBtn.addEventListener('click', () => li.remove());

  li.appendChild(deleteBtn);
  taskList.prepend(li); // новые задачи — сверху

  // Сброс формы
  form.reset(); // сбрасывает все поля формы
  taskInput.focus();
});

✅ Итоги урока

• input.value — значение текстового поля (всегда строка)
• checkbox.checked — состояние чекбокса (true/false)
• Для number-поля значение всегда строка — конвертируй через Number()
• Событие submit — вешается на <form>, срабатывает при отправке
• event.preventDefault() — обязателен в submit, иначе страница перезагрузится
• Валидация: проверяем данные, собираем ошибки, показываем пользователю
• form.reset() — удобный метод для сброса всех полей формы
• Всегда используй .trim() для текстовых полей