Form Submission - HTTP Tutorials

Form data can be submitted in different formats. The most common are application/x-www-form-urlencoded (default) and multipart/form-data (for file uploads).

The FormData API makes it easy to construct form data from a form element or programmatically.

Using FormData with fetch()

// Method 1: From a form element const form = document.querySelector('form'); const formData = new FormData(form); const response = await fetch('/api/submit', { method: 'POST', body: formData // Don't set Content-Type! Browser sets it with boundary }); // Method 2: Build FormData manually const formData = new FormData(); formData.append('name', 'Alice'); formData.append('email', 'alice@example.com'); formData.append('age', '30'); // Method 3: From an object const data = { name: 'Alice', email: 'alice@example.com' }; const formData = new FormData(); Object.entries(data).forEach(([key, value]) => { formData.append(key, value); });

URL-Encoded Form Data

// For simple forms without files, URL encoding is more compact const form = document.querySelector('form'); const formData = new FormData(form); // Convert to URLSearchParams for URL encoding const params = new URLSearchParams(formData); const response = await fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: params.toString() // Results in: "name=Alice&email=alice%40example.com" }); // Or build manually const params = new URLSearchParams({ name: 'Alice', email: 'alice@example.com', message: 'Hello & goodbye!' // Special chars are encoded }); console.log(params.toString()); // "name=Alice&email=alice%40example.com&message=Hello+%26+goodbye%21"

Intercepting Form Submission

// Prevent default submission and handle with fetch const form = document.querySelector('#contact-form'); const submitBtn = form.querySelector('button[type="submit"]'); const status = document.querySelector('#status'); form.addEventListener('submit', async (e) => { e.preventDefault(); // Disable button during submission submitBtn.disabled = true; submitBtn.textContent = 'Submitting...'; try { const formData = new FormData(form); const response = await fetch(form.action, { method: form.method, body: formData }); if (!response.ok) { throw new Error(`HTTP $${response.status}`); } const result = await response.json(); status.textContent = 'Submitted successfully!'; form.reset(); } catch (error) { status.textContent = `Error: $${error.message}`; } finally { submitBtn.disabled = false; submitBtn.textContent = 'Submit'; } });

Try It Live

Fill out the form and click "Show Request"