Forms in React

Types of Fields in React Forms

What Is a Controlled Component in React?

What Is an Uncontrolled Component in React?

Using the useRef Hook to implement an uncontrolled form component in React

Using the FormData Web API to implement an uncontrolled form component in React

Using the action form prop to implement an uncontrolled form component in React

action=URL: Handling form submission with a URL

action={function () { ... }}: Handling form submission with a client function

action={async function () { "use server" }}: Handling form submission with a server function

What to know about the action prop

value prop is valid for hidden fields

You can pass arguments to the action handler

Progressive enhancement of the form component

Using the formAction button prop to implement an uncontrolled form component in React

formAction=URL: Handling form submission with a URL

formAction={function () { ... }}: Handling form submission with a client function

formAction={async function () { "use server" }}: Handling form submission with a server function

What to know about the formAction prop

value prop is valid for hidden fields

You can pass arguments to the action handler

Progressive enhancement of the form component

Creating multiple types of submission buttons

Important Things to Know About Forms in React

<textarea> element in HTML vs. React

Example: HTML textarea component

Example: Controlled textarea component

Example: Uncontrolled textarea component

<select> element in HTML vs. React

Example: HTML select component

Example: Controlled select component

Example: Uncontrolled select component

Using one event handler for multiple controlled components is permitted

Uncontrolled vs. controlled form component

A form in React can have both controlled and uncontrolled components

Time to Practice with React Forms

How Did You Go About Creating Your Form App?

1. Create a new project directory

2. Install React and ReactDOM

3. Create the web page

4. Create a components directory

5. Create the TaskListMaker component

6. Create the root component

7. Create the entry script

8. Run your application