Working with Forms & User Input

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, typed Reactive Forms with FormGroup/FormControl, @if/@for).

This topic covers forms handled with event handlers (onSubmit). React 19's <form action={fn}>, useActionState, useFormStatus and useOptimistic are covered in the next topic, Handling Forms via Form Actions.

Test yourself

14 questions

1
Submitting a Form: onSubmit, preventDefault, and Button Types
A form's onSubmit handler runs when the form is submitted. Calling event.preventDefault() stops the browser's default behavior: sending an HTTP request and reloading the page.
2
Controlled Inputs with One State Object
A controlled input gets its value from React state and updates that state in onChange. React state is the single source of truth for what the input shows.
3
Uncontrolled Inputs with Refs
An uncontrolled input keeps its own value in the DOM. React reads it only when needed, through a ref.
4
Reading Values with FormData
FormData is a browser API (not React) that collects every named field of a <form> into key-value pairs.
5
Resetting Forms
Returning every field to its starting value after submission or on request.
6
Controlled vs Uncontrolled: Choosing an Approach
Controlled inputs store values in React state; uncontrolled inputs leave them in the DOM and read them on submit.
7
Built-in Browser Validation
HTML validation attributes let the browser check input and block submission, without JavaScript.
8
Custom Validation: On Keystroke, On Blur, On Submit
Checking values in your own code and showing your own error messages, at a moment you choose.
9
Reusable Inputs and a useInput Hook
Moving repeated input markup into an <Input> component and repeated state/validation logic into a custom hook.
10
Summary