Forms in React

Types of Fields in React Forms

What is a controlled form field in React?

What is an uncontrolled form field in React?

Use the useRef Hook to access uncontrolled form values

Use the FormData Web API to access uncontrolled form values

Use the action form prop to access uncontrolled form values

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

Use the formAction button prop to access an uncontrolled form value

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