Forms

Introduction

Forms are how applications collect information from users — signing up, logging in, searching, checking out. Since a React app is still just HTML under the hood, you build forms using the same familiar elements: form, input, label, and button, all written directly in JSX.

In this lesson you will build a basic form, learn how to handle its submission with onSubmit, stop the browser's default page reload with event.preventDefault(), and collect a couple of field values when the form is submitted. You will also get a preview of the two different philosophies React offers for managing form inputs — controlled and uncontrolled components — which the next two lessons cover in depth.

Building a Basic Form

A React form looks almost identical to a plain HTML form — you use a <form> element containing <label> and <input> elements, plus a submit <button>. The main JSX-specific detail is using the htmlFor attribute instead of HTML's for, since for is a reserved word in JavaScript.

function ContactForm() {
  return (
    <form>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />

      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />

      <button type="submit">Send</button>
    </form>
  );
}

Name  [___________]
Email [___________]
[ Send ]

Handling onSubmit

By default, submitting an HTML form reloads the entire page and sends the data to a server URL — behavior inherited from decades-old web standards. In a React app, you almost always want to intercept this and handle the submission with JavaScript instead. You do that by attaching an onSubmit handler to the <form> element and calling event.preventDefault() as the very first line.

function BasicSubmit() {
  function handleSubmit(event) {
    event.preventDefault(); // stop the default page reload
    console.log("Form submitted!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Type something" />
      <button type="submit">Submit</button>
    </form>
  );
}

Form submitted!

Collecting Field Values on Submit

A common pattern for a simple form is to read each field's current value directly from the event only at the moment of submission, using event.target — the form element itself — and its named elements.

function SignupForm() {
  function handleSubmit(event) {
    event.preventDefault();

    const name = event.target.name.value;
    const email = event.target.email.value;

    console.log("Name:", name);
    console.log("Email:", email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />

      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />

      <button type="submit">Sign Up</button>
    </form>
  );
}

Name: Priya
Email: priya@mail.com

Here, event.target.name and event.target.email work because each input's name attribute matches a property on the form element, giving quick access to raw values without wiring up state for every keystroke.

Two Philosophies: Controlled vs Uncontrolled

The example above reads values only when the form is submitted, letting the DOM manage each input's value the whole time you are typing. This is the foundation of what React calls an uncontrolled component. The alternative is to have React state drive the input's value on every keystroke, known as a controlled component. Both are valid, and React fully supports each style.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Building a form in React starts with familiar HTML elements, plus one essential habit: handling onSubmit and calling event.preventDefault() so the page never reloads. From there, you can read field values directly at submission time — a lightweight, uncontrolled-style approach.

In this lesson, you learned how to structure a basic form, handle its submission, and collect field values, along with a preview of the controlled vs uncontrolled philosophies. Next, you will explore controlled components in depth, where React state fully drives every input.