Формы

Пример формы

<form id="loginForm">
  <input type="text" name="username" placeholder="Введите имя пользователя" required />
  <input type="password" name="password" placeholder="Введите пароль" required />
  <button type="submit">Войти</button>
</form>

Доступ к формам

const form = document.getElementById('loginForm');
const sameForm = document.forms['loginForm'];
const firstForm = document.forms[0];

Свойства форм

• action — URL для отправки данных
• method — HTTP-метод
• elements — коллекция элементов формы
• noValidate — отключает HTML5-валидацию
• length — количество полей
  

console.log(form.action);
console.log(form.elements['username'].value);

Методы форм

• submit() — отправляет форму
• reset() — сбрасывает поля
• checkValidity() — проверяет корректность
• reportValidity() — показывает ошибки пользователю
  

form.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData(form);
  fetch('/login', { method: 'POST', body: data });
});

Объект FormData

Позволяет удобно работать с данными формы:

const data = new FormData(form);
console.log(data.get('username'));

События форм

• submit — при отправке
• reset — при сбросе
• input — при изменении значения
• change — при потере фокуса после изменения
• focus / blur — при фокусе и потере фокуса
  

form.addEventListener('submit', e => {
  e.preventDefault();
  const username = form.elements['username'].value.trim();
  const password = form.elements['password'].value.trim();

  if (!username || !password) {
    alert('Заполните все поля.');
    return;
  }

  console.log('Отправка:', { username, password });
});

Валидация с помощью JavaScript

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

form.addEventListener('submit', e => {
  e.preventDefault();
  if (!emailInput.validity.valid) {
    emailInput.setCustomValidity('Введите корректный email!');
    emailInput.reportValidity();
  } else {
    emailInput.setCustomValidity('');
    console.log('Форма успешно отправлена!');
  }
});

Пример: AJAX-отправка формы

form.addEventListener('submit', async e => {
  e.preventDefault();
  const data = new FormData(form);

  const res = await fetch('/api/submit', { method: 'POST', body: data });
  const result = await res.json();
  console.log('Ответ сервера:', result);
});

Безопасность форм

Две главные угрозы:

1. XSS — внедрение вредного кода через ввод пользователя.
2. CSRF — подделка запроса от имени пользователя.
   

Защита от XSS

Никогда не вставляйте данные напрямую в HTML:

element.textContent = userInput; // безопасно

Избегайте innerHTML, если строка не прошла очистку.

Защита от CSRF

Используйте токен:

<input type="hidden" name="csrf_token" value="abc123xyz" />

Проверяйте токен на сервере.

fetch('/api/comment', {
  method: 'POST',
  headers: { 'X-CSRF-Token': csrfToken },
  body: new FormData(form)
});

Итог

• Формы реализованы через HTMLFormElement.
  
• Основные свойства: action, method, elements.
• Методы: submit(), reset(), checkValidity().
• События: submit, input, change.
• Объект FormData упрощает работу с данными.
• JavaScript может дополнять HTML5-валидацию.
  
• Валидируйте ввод и предотвращайте XSS
• Проверяйте CSRF-токены
• Работайте с fetch() и async/await
• Реализуйте кастомную валидацию