Form submission handling in React

Introduction

Form submission handling lets your app collect and use information users type in forms. It helps you respond when users click submit.

When you want to get user input like names or emails.

When you need to check or save data users enter before moving on.

When you want to show a message after users send a form.

When you want to prevent the page from reloading on submit.

When you want to update your app based on what users typed.

Syntax

React

function handleSubmit(event) {
  event.preventDefault();
  // Your code to process form data
}

<form onSubmit={handleSubmit}>
  {/* form fields here */}
  <button type="submit">Submit</button>
</form>

Use event.preventDefault() to stop the page from reloading.

Attach your handler function to the form's onSubmit event.

Examples

This example shows a simple alert when the form is submitted.

React

function handleSubmit(event) {
  event.preventDefault();
  alert('Form submitted!');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

This example collects a name and shows it in an alert when submitted.

React

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Hello, ${name}!`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter your name"
        aria-label="Name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Sample Program

This React component shows a simple email subscription form. When the user types an email and clicks submit, the page does not reload. Instead, it shows a thank you message below the form. The form uses accessible labels and required fields.

React

import React, { useState } from 'react';

export default function SimpleForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    setMessage(`Thank you for submitting your email: ${email}`);
  }

  return (
    <main style={{ maxWidth: '400px', margin: '2rem auto', fontFamily: 'Arial, sans-serif' }}>
      <h1>Subscribe</h1>
      <form onSubmit={handleSubmit} aria-label="Email subscription form">
        <label htmlFor="emailInput">Email address:</label><br />
        <input
          id="emailInput"
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="[e-mail]"
          required
          aria-required="true"
          style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem', marginBottom: '1rem', fontSize: '1rem' }}
        />
        <button type="submit" style={{ padding: '0.5rem 1rem', fontSize: '1rem' }}>Submit</button>
      </form>
      {message && <p role="alert" style={{ marginTop: '1rem', color: 'green' }}>{message}</p>}
    </main>
  );
}

Important Notes

Always use event.preventDefault() to stop the page from refreshing on submit.

Use state to keep track of form input values.

Label your inputs clearly and use aria-label or htmlFor for accessibility.

Summary

Form submission handling lets you control what happens when users send a form.

Use onSubmit on the form and event.preventDefault() to stop page reload.

Use state to read and respond to user input.