formData

Detailed Explanation

formData is a built-in browser API that represents the data from a form submission as key-value pairs. In React Router actions, you use it to extract what the user typed into each form field.

When a user submits a form, the browser bundles all the input values into a FormData Object. Inside your action, you access it like this:

export async function action({ request }) {
  const formData = await request.formData();
  const title = formData.get('title');
  const content = formData.get('content');
  // Now validate and save to database...
}

The name attribute on each HTML input determines the key. So <input name="title" /> means formData.get('title') returns whatever the user typed.

FormData can hold text fields, numbers, file uploads, and even hidden fields. Common patterns in Supabase apps:

• formData.get('title') — get a single text value
• formData.get('id') — get a hidden field (like the post ID for editing)
• formData.getAll('tags') — get multiple values from checkboxes

FormData is part of the JavaScript standard — it works in all browsers, no Library needed. It pairs with Validation (check the data before saving), useActionData (return errors if validation fails), and Redirect (navigate away on success).