Формы: свойства, методы, события

Форма — это набор элементов ввода (input, select, textarea). Свойство .value читает/меняет текущее значение. Событие input срабатывает при каждом вводе символа. Событие change срабатывает при потере фокуса или подтверждении select. form.elements — коллекция всех элементов формы. FormData — удобный способ собрать все данные формы.

Доступ к элементам формы:

const form = document.querySelector('#myForm'); const nameInput = form.elements.name; // по атрибуту name const allInputs = form.elements; // все элементы

Свойство value:

const input = document.querySelector('#name'); console.log(input.value); // чтение input.value = 'Новое значение'; // запись

События формы:

• input — каждый символ (мгновенно)

input.addEventListener('input', (e) => { console.log('Текущее:', e.target.value); });

• change — завершение ввода (потеря фокуса, Enter в select)

input.addEventListener('change', (e) => { console.log('Итоговое:', e.target.value); });

Разница input vs change:

• input: «Пользователь печатает прямо сейчас»
• change: «Пользователь закончил ввод»

Для input[type="checkbox"] и input[type="radio"]:

• .checked — true/false
• change срабатывает при переключении

Для select:

• select.value — выбранное значение
• select.selectedIndex — индекс выбранного option
• change при выборе нового option

FormData:

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

// Чтение console.log(formData.get('name')); // значение по name="name" console.log(formData.has('email')); // true/false

// Перебор for (const [key, value] of formData) { console.log(key, value); }

// Преобразование в объект const data = Object.fromEntries(formData);

Форма — как анкета. input.value — то, что написано в строке. change — когда вы закончили писать и отложили ручку. input — когда вы пишете каждый символ. FormData — как заполненная анкета: все ответы собраны в одном месте.

**Самый простой:**

<input type="text" id="name" value="">
<p id="output"></p>

<script>
const input = document.getElementById('name');
const output = document.getElementById('output');

input.addEventListener('input', (e) => {
  output.textContent = e.target.value;
});
</script>

input event: текст появляется в реальном времени (символ за символом).

**Простой:**

<form id="myForm">
  <input type="text" name="name" placeholder="Имя">
  <input type="email" name="email" placeholder="Email">
  <select name="role">
    <option value="user">Пользователь</option>
    <option value="admin">Админ</option>
  </select>
</form>

<script>
const form = document.getElementById('myForm');

form.addEventListener('input', (e) => {
  const data = Object.fromEntries(new FormData(form));
  console.log(data);
  // { name: '...', email: '...', role: 'user' }
});
</script>

Сбор данных формы через FormData в реальном времени.

**Реальный пример:**

// Валидация в реальном времени
const form = document.querySelector('#registration');
const emailInput = form.elements.email;
const emailError = document.querySelector('#email-error');

function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

emailInput.addEventListener('input', (e) => {
  const value = e.target.value;
  if (value && !validateEmail(value)) {
    emailInput.classList.add('invalid');
    emailError.textContent = 'Некорректный email';
  } else {
    emailInput.classList.remove('invalid');
    emailError.textContent = '';
  }
});

Реальная валидация: проверка email при каждом вводе символа.

**Неправильно:** Путать input и change события

**Почему:** input — каждый символ. change — завершение ввода (потеря фокуса).

**Правильно:** input = в реальном времени. change = завершение.

**Неправильно:** Читать value у select через .value

**Почему:** Для select .value работает. Но для checkbox нужен .checked.

**Правильно:** input/select/textarea → .value. checkbox/radio → .checked.

**Неправильно:** Забывать, что FormData хранит строки

**Почему:** FormData.get() возвращает строку. Числа нужно преобразовывать.

**Правильно:** const age = Number(formData.get('age'));

• form.elements — доступ к элементам по name
• .value — текущее значение input/select/textarea
• .checked — состояние checkbox/radio
• input event — каждый символ
• change event — завершение ввода
• FormData — удобный сбор данных формы

Назад: Вы знаете события (DA1-DA6). Теперь вы применяете их к взаимодействию с формами.

Вперёд: Следующий урок (DA8) — отправка форм: объединение форм и fetch для реальной отправки данных.