Формы и события форм

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

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

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

    console.log(data);
});

const formData = new FormData(form);

formData.get('email');        // значение
formData.getAll('tags');      // все значения
formData.has('email');        // true
formData.append('extra', '1');
formData.set('email', 'new@example.com');
formData.delete('extra');

const data = Object.fromEntries(formData);

input.addEventListener('input', () => {
    console.log('на каждый символ');
});

input.addEventListener('change', () => {
    console.log('после потери фокуса');
});

form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
        event.preventDefault();
        // показать ошибки
    }
});

<input type="email" required>
<input type="text" minlength="3" maxlength="20">
<input type="number" min="0" max="100">
<input type="text" pattern="[A-Za-z]+">

input.addEventListener('input', () => {
    if (input.validity.valid) {
        input.classList.remove('invalid');
    } else {
        input.classList.add('invalid');
    }
});

input.addEventListener('invalid', (event) => {
    event.target.setCustomValidity('Введите корректный email');
});

input.addEventListener('input', (event) => {
    event.target.setCustomValidity('');
});

checkbox.addEventListener('change', () => {
    console.log(checkbox.checked); // true/false
});

document.querySelectorAll('input[name="gender"]').forEach((radio) => {
    radio.addEventListener('change', () => {
        if (radio.checked) console.log(radio.value);
    });
});

form.addEventListener('change', (event) => {
    if (event.target.name === 'gender') {
        console.log(event.target.value);
    }
});

select.addEventListener('change', () => {
    console.log(select.value);
    console.log(select.selectedOptions); // выбранные option
});

[...select.selectedOptions].map((o) => o.value);

fileInput.addEventListener('change', () => {
    const files = fileInput.files;

    for (const file of files) {
        console.log(file.name, file.size, file.type);
    }
});

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

    const formData = new FormData(form);

    try {
        const res = await fetch('/api/submit', {
            method: 'POST',
            body: formData,
        });

        if (!res.ok) throw new Error(`HTTP ${res.status}`);

        form.reset();
        showSuccess();
    } catch (error) {
        showError(error.message);
    }
});

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

await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
});

form.reset(); // к значениям по умолчанию