Form Events in React – Complete Beginner’s Guide with Example (2026)

 What Are Form Events in React? Complete Guide with Program

React Form Events are events that happen when a user interacts with a form. For example, when a user types into an input box, selects an option, checks a checkbox, or submits a form, React can detect that action and run a function.

In React, form events are very important because they allow us to capture user input, validate data, update state, and submit forms without refreshing the page.

What Are Form Events in React?

Form events are user actions related to HTML form elements such as:

• <input>
• <textarea>
• <select>
• <button>
• <form>

Event	Purpose
onChange	Detects changes in input values
onSubmit	Runs when a form is submitted
onFocus	Runs when an input gets focus
onBlur	Runs when an input loses focus
onInput	Detects input changes
onReset	Runs when a form is reset

1. onChange Event

The onChange event is commonly used with input fields.

Whenever the user changes the value of an input, React calls the function connected to onChange.

Example

import { useState } from "react";

 function App() {

  const [name, setName] = useState("");

   return (

    <div>

      <h2>Student Name</h2>

       <input

        type="text"

        value={name}

        onChange={(event) => setName(event.target.value)}

        placeholder="Enter your name"

      />

       <p>Your Name: {name}</p>

    </div>

  );

}

 export default App;

Output  onChange Event

Student Name 

[ Aishwarya   ]

 Your Name: Aishwarya

keyboard events in react 

onSubmit Event

The onSubmit event is triggered when the user submits a form.

Instead of allowing the browser to reload the page, React applications commonly use event.preventDefault().

Example

import { useState } from "react";

 function App() {

  const [name, setName] = useState("");

  const [message, setMessage] = useState("");

  const handleSubmit = (event) => {

    event.preventDefault();

     setMessage(`Welcome, ${name}! Your form was submitted successfully.`);

  };

   return (

    <div>

      <h2>Student Registration</h2>

       <form onSubmit={handleSubmit}>

        <input

          type="text"

          value={name}

          onChange={(event) => setName(event.target.value)}

          placeholder="Enter your name"

        />

         <button type="submit">Submit</button>

      </form>

       <p>{message}</p>

    </div>

  );

}

 export default App;

Output  onSubmit Event

Initially:

Student Registration

 [ Enter your name ]

 [ Submit ]

If the user enters:

Rahul

and clicks Submit, the output becomes:

Student Registration 

[ Rahul ]

 [ Submit ]

 Welcome, Rahul! Your form was submitted successfully.

Why  Use event.preventDefault()?

Normally, when an HTML form is submitted, the browser may reload the page.

In React, we often want to handle the submission ourselves.

const handleSubmit = (event) => {

  event.preventDefault();

   // React form logic

};

Here:

event

contains information about the event.

And:

event.preventDefault();

prevents the browser's default form submission behavior.

This allows React to process the form without an unnecessary page refresh.

What are mouse events in react 

4. onFocus Event

The onFocus event occurs when the user clicks inside an input or moves the keyboard focus to it.

Example

import { useState } from "react";

 function App() {

  const [message, setMessage] = useState("");

   return (

    <div>

      <h2>Focus Event Example</h2>

       <input

        type="text"

        placeholder="Click here"

        onFocus={() => setMessage("Input field is focused")}

      />

5. onBlur Event

The onBlur event occurs when an input loses focus.

For example, the user clicks inside an input and then clicks somewhere else.

Example onBlur Event

import { useState } from "react";

 function App() {

  const [message, setMessage] = useState("");

   return (

    <div>

      <h2>Blur Event Example</h2>

       <input

        type="text"

        placeholder="Enter your name"

        onFocus={() => setMessage("You are typing in the field")}

        onBlur={() => setMessage("You left the field")}

      />

       <p>{message}</p>

    </div>

  );

}

 export default App;

onBlur Event Output

When the user enters the input:

You are typing in the field

When the user clicks outside:

You left the field

what is mouse events in react

---

Complete React Form Events Program

The following example demonstrates several form events together:

• onChange
• onSubmit
• onFocus
• onBlur
• preventDefault()

import { useState } from "react";

 function App() {

  const [name, setName] = useState("");

  const [email, setEmail] = useState("");

  const [message, setMessage] = useState("");

   const handleSubmit = (event) => {

    event.preventDefault();

     if (name === "" || email === "") {

      setMessage("Please fill in all fields.");

      return;

    }

     setMessage(`Thank you ${name}! Your form has been submitted.`);

  };

   const handleNameFocus = () => {

    setMessage("Name field is focused.");

  };

   const handleNameBlur = () => {

    setMessage("Name field lost focus.");

  };

   return (

    <div>

      <h2>Student Registration Form</h2>

       <form onSubmit={handleSubmit}>

         <label>Name:</label>

        <br />

         <input

          type="text"

          value={name}

          onChange={(event) => setName(event.target.value)}

          onFocus={handleNameFocus}

          onBlur={handleNameBlur}

          placeholder="Enter your name"

        />

         <br />

        <br />

         <label>Email:</label>

        <br />

         <input

          type="email"

          value={email}

          onChange={(event) => setEmail(event.target.value)}

          placeholder="Enter your email"

        />

         <br />

        <br />

         <button type="submit">Register</button>

       </form>

 

      <p>{message}</p>

    </div>

  );

}

 export default App;

Program Output 

Complete React Form Events Program

When the application starts:

Student Registration Form

 Name:

[ Enter your name ]

 Email:

[ Enter your email ]

 [ Register ]

The user enters:

Name: Web Designing Theory

Email: webdesigningtheroy@gmail.com

After clicking Register:

Student Registration Form

 Name:

[ Web Designing Theory]

 Email:

[ webdesigningtheroy@gmail.com ]

 [ Register ]

 

Thank you Web Designing Theory! Your form has been submitted.

If the user clicks Register without entering the required information:

Please fill in all fields.

---

How the Complete Program Works

The flow of the program is simple:

User interacts with form

        ⬇

React detects the event

         ⬇

Event handler function runs

         ⬇

State is updated

         ⬇

React re-renders the component

         ⬇

User sees updated result

For example, when the user types a name:

User types "Web Designing Theory"

         ⬇

onChange runs

         ⬇

event.target.value gets "Web Designing Theory"

         ⬇

setName("Web Designing Theory")

         ⬇

React updates the state

         ⬇

UI displays the new value

---

Important event.target.value

One of the most frequently used expressions in React forms is:

event.target.value

It gives us the current value entered by the user.

For example:

onChange={(event) => setName(event.target.value)}

If the user types:

Priya

then:

event.target.value

contains:

Priya

React can then store that value in state.

---

Controlled Form Example

A React form is commonly called a controlled form when React state controls the input value.

const [username, setUsername] = useState("");

 <input

  value={username}

  onChange={(event) => setUsername(event.target.value)}

/>

Here there is a connection between:

Input

  ⬇

onChange

  ⬇

State

  ↓

value

  ↓

Input

This gives React complete control over the form data.

---

Common Mistakes Beginners Make

1. Forgetting preventDefault()

const handleSubmit = (event) => {

  event.preventDefault();

};

Without it, the browser's normal form submission behavior can interfere with the React experience.

2. Forgetting value

For a controlled input:

value={name}

should be connected to state.

3. Not using onChange

If the input is controlled but there is no way to update its state, the user may not be able to change the displayed value normally.

4. Using the wrong event name

React uses:

onChange

onSubmit

onFocus

onBlur

not HTML-style lowercase event attributes such as:

onchange

onsubmit

Advantages of Form Events in React

1. Easy user input handling
2. Real-time form updates
3. Simple form validation
4. No unnecessary page refresh
5. Works well with React state
6. Useful for login and registration forms
7. Makes interactive forms easier to build
8. Allows developers to control form data
9. Useful for search boxes and filters
10. Can provide immediate feedback to users

Real-World Uses

React form events are commonly used in:

• Login forms
• Registration forms
• Contact forms
• Search boxes
• Feedback forms
• Online exams
• Student registration
• E-commerce checkout
• Profile editing
• Job application forms
• Survey applications

Key Takeaway

React Form Events are the mechanism through which React responds to user interactions with forms. The most important events for beginners are onChange for tracking input changes and onSubmit for handling form submission. onFocus and onBlur are especially useful when you want to provide feedback while the user interacts with individual fields.

      <p>{message}</p>

    </div>

  );

}

 export default App;

Output

Before clicking:

Focus Event Example

 [ Click here ]

After clicking inside the input:

Focus Event Example

[ Click here ]

 Input field is focused