# Form Handling
Course: [React](https://www.devtutorials.ai/learn/react) · Section: Forms
Source: https://www.devtutorials.ai/learn/react/forms/form-handling
> Controlled components, text, textarea, select, checkbox, radio and special inputs, handling input, many inputs with one handler, form state, submission and resetting.
## Introduction to Forms
A **form** is a part of a page where the user types or chooses information, and then sends it. Login boxes, search bars, sign-up pages and checkout pages are all forms.
A form is made of **inputs** (boxes, lists, tick boxes) and a **submit button**. In React, you keep what the user types in **state**, so your code always knows the current values.
### Real-World Example
A bookshop checkout page has inputs for name, address and a delivery option. Each input is controlled: `value={form.name}` shows the state, and `onChange` updates it.
When the user clicks **Place order**, `onSubmit` calls `e.preventDefault()` and sends the `form` object to the server. The page does not reload.
In React, the values of a form are kept in state. Each input shows the state, and each change updates the state.
## Controlled Components
A **controlled component** is an input whose value is managed by React state.
React controls what appears in the input by storing the value in state and updating it whenever the user types.
To make an input controlled, you need two props:
- **`value`** — tells the input what value to display. It is usually connected to a state variable.
- **`onChange`** — runs whenever the user changes the input. It updates the state with the new value.
Together, `value` and `onChange` keep the input and state in sync.
Typing goes into state with onChange. The box shows the state with value. Round and round.
Hello, {name || "reader"}!
Your name has {name.length} letters.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Type in the box. The greeting and the letter count change as you type, because they read the same `name` state.
Look at this line:
```tsx
setName(e.target.value)} />
```
- `value={name}` makes the box show the `name` state.
- `onChange` runs on every key press. `e.target.value` is the text in the box now. `setName` saves it.
If you set `value` but forget `onChange`, the box is stuck. You cannot type in it, because nothing updates the state.
## Form Input Elements
Each kind of input works in almost the same way: show the state, and update it on change. Only a few details are different.
### Text Input
A **text input** is a one-line box for short text, such as a name. You saw it above.
```tsx
setName(e.target.value)}
/>
```
### Textarea
A **textarea** is a bigger box for long text, such as a review. In React, you set its text with `value`, the same as a text input.
```tsx