Как будет работать кнопка с type="submit"?

Как работает button с type="submit"?

Этот вопрос проверяет базовое понимание HTML форм и их жизненного цикла в браузере. Это необходимое знание для любого фронтенд-разработчика.

Основной механизм

Кнопка с type="submit" автоматически отправляет форму, в которой она находится. Это встроенное поведение браузера.

Базовый пример

<form id="loginForm">
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">Войти</button>
</form>

Когда пользователь нажимает кнопку:

1. Браузер проверяет валидацию формы (required, type validation)
2. Если всё ок, генерируется событие submit
3. Форма отправляется (по умолчанию GET на страницу)

События при отправке

const form = document.getElementById('loginForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const formData = new FormData(form);
  const email = formData.get('email');
  const password = formData.get('password');
  
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  })
  .then(res => res.json())
  .catch(err => console.error('Error', err));
});

Различные типы кнопок

<button type="submit">Отправить</button>
<button type="reset">Очистить</button>
<button type="button">Нажми меня</button>
<button>Это тоже submit</button>

Валидация перед submit

Браузер автоматически проверяет:

• required: поле заполнено
• type="email": корректный email
• min/max: значение в диапазоне

Если валидация не пройдена, submit не будет вызван.

Отправка данных

GET (по умолчанию)

<form method="GET" action="/search">
  <input type="text" name="q" />
  <button type="submit">Поиск</button>
</form>

POST (безопаснее)

<form method="POST" action="/login">
  <input type="email" name="email" />
  <input type="password" name="password" />
  <button type="submit">Войти</button>
</form>

В React приложениях

import { useState } from 'react';

export function LoginForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setLoading(true);

    const formData = new FormData(event.target);
    const email = formData.get('email');

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      });
      const data = await response.json();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Email"
        required
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? 'Загрузка...' : 'Войти'}
      </button>
    </form>
  );
}

Жизненный цикл submit

1. Пользователь нажимает button type="submit"
2. Браузер генерирует событие submit
3. Обработчик события может вызвать event.preventDefault()
4. Если preventDefault не вызван, форма отправляется
5. Обычно это вызывает перезагрузку страницы (если не используется AJAX)

Частые ошибки

// Неправильно: забыли event.preventDefault()
form.addEventListener('submit', () => {
  fetch('/api/login', {...});
  // Форма всё равно отправится!
});

// Правильно
form.addEventListener('submit', (event) => {
  event.preventDefault();
  fetch('/api/login', {...});
});

На собеседовании

Хороший ответ покажет:

• Как браузер автоматически отправляет форму
• Событие submit и его обработка
• event.preventDefault() и его роль
• Валидация HTML5
• Как это используется в React приложениях
• Разница между типами кнопок

Это показывает понимание основ HTML и браузерной семантики.