Table of Contents

Forms are used everywhere in websites and apps. It is an invaluable way to collect information from users. React has its techniques and methods for managing the form data.

You will learn about controlled forms, a powerful technique for keeping the form data in sync with the state. We will then look at the different types of forms and their features in React.

HTML vs React Forms

A form in HTML and a form in React is slightly different. They are not the same. There is no concept of state in HTML. It just represents a plain form.

While forms in React can use state, props, have default values, and differ in syntax. We can also apply the power of controlled forms and do more in React.

Controlled Forms

A controlled form is a type of form where its value connects with a state. In a controlled form, the state is in sync with the form’s value so that:

Any change to the form’s value immediately updates the connected state.
Any state update immediately reflects the form’s value.

If you update a controlled form input by typing something on it, it will trigger updates to the state. As the state is connected and updated, it immediately reflects in the form’s value.

A controlled form stores the latest data to the state on every change. It forms a two-way connection, and the state becomes a single source of truth for the form’s data.

Creating a Controlled Form

Two things are required to create a controlled form:

An onChange event handler that will detect any changes to the form’s value and update the state accordingly.
Assigning the state to the form’s value attribute so that any state changes are updated in the form (UI).

MyComponent.js
import { useState } from 'react'
const myComponent = props => {
    /* define the state */
const [ val, setVal ] = useState(‘’);
return (
        <form>
            {/* 
Use value and onChange attributes. These two attributes are the core of controlled forms.
*/}
            <input 
type='text' 
{/* assign state val to the value attribute */}
value={val} 
onChange={
/* update the val state on form value change */
() => setVal(e.target.value) 
} 
/>
        </form>
)
}
export default MyComponent;

Benefits of Controlled Forms

Each form element has one single source of truth (state).
No need to use DOM manipulation or React Refs to retrieve the value of the form input. Because in controlled forms, every small change is updated to the state.
The latest value of the form is accessible from the state.

Form Elements in React

React has all the form elements that HTML supports. They differ in the attribute names and properties.

Some form elements in HTML, like textarea, select, etc., don’t have the value attribute. But all React form elements have support for the value attribute.

This is why controlled forms are possible on all types of form elements by using onChange and value attributes. For naming the form input elements, the label tag should be used.

<label>
Enter your name:
<input type='text' />
</label>

Input Element

The input tag can take different attributes and event listeners. The input type can be number, file, date, password, color, etc.

<input 
type='text'
value='some value'
defaultValue='some default value'
readOnly
required
/>

Textarea Element

In React, the textarea element is similar to a text input, but you can specify a larger input with multi-line support using rows and cols.

The value attribute is all required to change the textarea’s value.

<textarea 
value={val}
onChange={ () => { // update val state to make controlled form } }
defaultValue={defaultval}
rows={rowCount}
cols={colCount}
readOnly
required
/>

Checkbox And Radio Inputs

Most beginners get confused in using the checkbox and radio input elements.

To create a checkbox, use

<input 
type='checkbox'
value={ radioValue }
checked={ checkedBoolean }
/>

To create a radio button, use

<input
name='groupname'
type='radio'
value={ radioValue }
checked={ checkedBoolean }
/>

In HTML, checked = false is not possible. But in React you can control the checked value to true or false using states.

Select Input

In React’s select input, you can specify a value attribute which is not possible in HTML. So, you can make it a controlled form by using the value and onChange attributes.

<select value={selectValue} onChange={() => { // update state } }>
    <option value=’html’>HTML</option>
    <option value=’css’>CSS</option>
    <option value=’js’>JS</option>
</select>

Also, in each option element, you can specify the selected attribute:

<option value='html' selected={selectedBoolean}>HTML</option>

Summary

Forms are required in almost every web application. React has a huge benefit over HTML in that you can control a form element completely using state.

React forms support controlled forms very well in all different types of form input like radio, checkbox, select. Two attributes – value and onChange are required to make a controlled form.

Syncing the form values makes it easily accessible from the state without having to use DOM or React Refs.

React – Forms