Hello Friends,

Here, I will show you how to use form in react js. This article will give you simple example of use form in react js. you will learn react js form. I explained simply step by step create form in react js. Here, Creating a basic example of react hook form.

In this example how to use form in react js. I will simply explain in use from in react js. So, let's start following example.

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app reactjs-my-example

          
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import  './index.css';

function FlavorForm(){
    return (
        <div className="form-section">

            <h1>How to use Form in React JS?</h1>

            <form>
                <label>
                    Enter Name:
                    <br/><br/>
                        <input type="text" placeholder="Enter Name" />
                    <br/><br/>
                </label>
                <label>
                    Pick your favorite flavor:
                    <br/><br/>
                    <select>
                        <option value="Grapefruit">Grapefruit</option>
                        <option value="Lime">Lime</option>
                        <option value="Coconut">Coconut</option>
                        <option value="Mango">Mango</option>
                    </select>
                    <br/><br/>
                </label>
                <label>
                    Select File:
                    <br/><br/>
                    <input type="file" />
                    <br/>
                </label>
                <br/>
                <label>
                    Enter Detail:
                    <br/><br/>
                        <textarea>
                            Hello there, this is some text in a text area
                        </textarea>
                    <br/>
                </label>
                <br/>
                <label>
                    I Agree:
                    <inpu>
                        name="isGoing"
                        type="checkbox"
                    />
                </label>
                <br/>
                <br/>
                <input className="click-button" type="submit" value="Submit" />

            </form>
        </div>
    );
    
}
  
const root = ReactDOM.createRoot(document.getElementById('root')); 

root.render();

.form-section{
    width:50%;
    margin:30px auto;
    border: 1px solid #000;
    padding:5px 20px 20px;
}
.form-section h1{
    text-align: center;
    margin-bottom:25px;
    margin-top:10px;
}
.form-section{
    border:1px solid #d2d2d2;
}
select,input[type=file],input[type=text],textarea{
    padding:10px;
    width: 100%;
    border: 1px solid #d2d2d2;
    background-color: #fff;
}
input[type=text],input[type=file],textarea{
    width:97%;
}
.click-button:hover{
    cursor: pointer;
}
.click-button{
    color: #fff;
    font-size:15px;
    border-radius:3px;;
    padding:8px 15px;
    border: 1px solid #d2d2d2;
    background-color: green;
}

npm start

Output:

I hope it can help you...