React Fundamental: Forms

📝 Mastering Forms in React: From Basics to File Uploads and Beyond

Working with forms in React might seem intimidating at first, but it’s actually quite simple once you understand how React works with the DOM and standard HTML form behaviors. In this blog post, we’ll explore everything from basic form handling to preventing full-page refreshes and uploading files — all using modern React.

🔍 Understanding Forms in React

Forms have been a part of the web since the very beginning. Originally, submitting a form would reload the entire page and send data via the URL. That’s not ideal for modern web applications, which strive to be dynamic and responsive without page reloads.

Thankfully, with React and some JavaScript, we can handle form submissions in a much more user-friendly way.

✅ The Basics: Submitting a Form

Here’s a simple form with a text input:

<form
  onSubmit={(event) => {
    event.preventDefault() // Prevent default full-page reload
    const formData = new FormData(event.currentTarget)
    // Do something with formData
  }}
>
  <label>
    Username
    <input name="username" type="text" />
  </label>
  <button type="submit">Submit</button>
</form>

Key takeaways:

• onSubmit handles the form submission.
• event.preventDefault() stops the browser from doing a full page reload.
• event.currentTarget refers to the <form> element.
• FormData lets you easily grab the form’s input values.

🏷️ Labeling Form Inputs

Accessibility matters! Always label your inputs clearly:

Option 1: Wrap input in label

<label>
  Name
  <input name="name" type="text" />
</label>

Option 2: Use htmlFor and id

<label htmlFor="nameInput">Name</label>
<input id="nameInput" name="name" type="text" />

In React, we use htmlFor (instead of for) because for is a reserved keyword in JavaScript.

🧪 Adding More Input Types

Modern HTML supports a variety of input types that simplify validation and UX. Here are a few examples we can add:

<input type="password" name="password" />
<input type="file" name="photo" />
<input type="color" name="favoriteColor" />
<input type="date" name="startDate" />

Explore all standard input types here.

🚫 Avoiding Full-Page Refreshes

By default, submitting a form triggers a GET request and updates the URL — not great for sensitive data like passwords. To improve:

Use POST Instead of GET:

<form action="/api/onboarding" method="POST">
  {/* fields */}
</form>

Why POST?

• Hides sensitive data from the URL
• Keeps data out of browser history
• Cleaner and more secure

🖼️ Uploading Files with Forms

File inputs require a different encoding to send file data properly.

Problem:

If you use default form settings, file inputs only send filenames — not the actual file content.

Solution:

Use enctype="multipart/form-data":

<form
  action="/api/onboarding"
  method="POST"
  encType="multipart/form-data"
>
  {/* inputs */}
</form>

This tells the browser to send form data (including files) as multipart/form-data.

🧠 Handling Form Submission with JavaScript

To prevent the full-page reload and handle the form submission manually:

<form
  action="/api/onboarding"
  method="POST"
  encType="multipart/form-data"
  onSubmit={(event) => {
    event.preventDefault()
    const formData = new FormData(event.currentTarget)
    console.log(Object.fromEntries(formData))
  }}
>
  {/* inputs */}
</form>

Bonus Tip:

Object.fromEntries(formData) converts the FormData into a plain object so you can easily inspect it in your dev tools.

⚛️ React’s action Prop (Advanced)

React supports an additional, very cool feature: passing a function to the action prop instead of a URL.

<form action={(formData) => {
  console.log(Object.fromEntries(formData))
}}>
  {/* inputs */}
</form>

This is not standard HTML behavior — this is a React-only feature that gives you even more control without needing onSubmit.

🛠 Tools & Resources

• 🧪 FormData MDN Docs
• 🎨 Input Types Reference
• ⚛️ React Form Docs
• 📦 Remix (for real-world form handling)

🎉 Wrapping Up

Forms are an essential part of web applications, and React makes working with them straightforward — once you understand how to work with the DOM and handle things like file uploads, preventing default behavior, and logging data correctly.

Whether you’re building a login form or an onboarding experience with file uploads, the core principles are the same:

• Prevent default behavior
• Use FormData
• Consider the HTTP method
• Label inputs for accessibility
• Handle files correctly

Happy form building! 💪