How are forms created in ReactJS ?

Last Updated : 20 Nov, 2023

Form is a document that stores information of a user on a web server using interactive controls. A form contains different kinds of information such as username, password, contact number, email ID, etc. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a static form.

Prerequisites:

Steps to Create React Application:

Step1: Create a React application using the following command:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Project Structure:

package.json:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom":"^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example 1: In this example, We are going to create a simple form component inside the App component of the App.js file. This is just a static form and it does not contain any sort of dynamic handling and processing of events so this form is a basic form and do not satisfy our requirement.

JavaScript

import React from 'react';
import './App.css';

function App() {

    return (
        <div className='App'>
            <div>
                <label>Input</label>
                <input type='text' />
            </div>
            <div>
                <label>Textarea</label>
                <textarea rows='5'></textarea>
            </div>
            <div>
                <button>Submit</button>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In this example, we are going to print the value inside the input box into the console log. To reach this we have to do the following:

Create a new function named 'detectChange' . This function will print the value of the target JSX element.
Call this function at 'onChange' event.
This is going to print the value of the input box whenever it is changed.

JavaScript

import React from 'react';
import './App.css';

function App() {

    function detectChange(e) {
        console.log(e.target.value)
    }

    return (
        <div className='App'>
            <div>
                <label>Input :</label>
                <input type='text' onChange={detectChange} />
            </div>
            <div>
                <button>Submit</button>
            </div>
        </div>
    );
}

export default App;

Output:

Example 3: In this example, we will be rendering the value inside the input box to another DOM element inside the same component using react state. Inside the App component of App.js

Make an inputValue state with the value of an empty string.
Set the value attribute of the input box equal to the inputValue state..
Update the inputValue state using setState() method whenever a change occurs inside the input box.
Set the text after 'Entered Value :' equal to inputValue state.

JavaScript

import React from 'react';
class App extends React.Component {

    state = { inputValue: '' };
    render() {
        return (
            <div>
                <form>
                    <label> Input </label>
                    <input type="text"
                        value={this.state.inputValue}
                        onChange={(e) => this.setState(
                            { inputValue: e.target.value })} />
                </form>
                <div>
                    Entered Value: {this.state.inputValue}
                </div>
            </div>
        );
    }
}

export default App;