Create a Form using ReactJS

In this tutorial, we'll explore the process of creating a form using React.js. The form will be constructed using JSX elements, and we'll utilize a functional component to render these elements. Various HTML elements will be generated within the project. To implement the project, we'll apply styling using CSS.

Now, let's take a glimpse of the envisioned final project:

Prerequisites: The pre-requisites for this project are:

HTML and CSS
Beginner-level knowledge of React.js
Functional Components
JavaScript ES6
Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app react-app

Step 2: After creating your project folder i.e. react-app, move to it using the following command:

cd react-app

Project Structure: It will look like the following:

Steps to Run Application:

Step 1: Run the application using the following command from the root directory of the project:

npm start

Step 2: Type the following link in your browser

http://localhost:3000/

Example: Write the following code in the respective files

App.js: This file contains the form element along with its structure
App.css: This file contains the styling of the application

import "./App.css"; 

function App() { 
    return ( 
        <div className="App"> 
            <h1>Form in React</h1> 
            <fieldset> 
                <form action="#" method="get"> 
                    <label for="firstname">First Name*</label> 
                    <input 
                        type="text"
                        name="firstname"
                        id="firstname"
                        placeholder="Enter First Name"
                        required 
                    /> 
                    <br /><br /> 
                    <label for="lastname">Last Name*</label> 
                    <input 
                        type="text"
                        name="lastname"
                        id="lastname"
                        placeholder="Enter Last Name"
                        required 
                    /> 
                    <br /><br /> 
                    <label for="email">Enter Email* </label> 
                    <input 
                        type="email"
                        name="email"
                        id="email"
                        placeholder="Enter email"
                        required 
                    /> 
                    <br /><br /> 
                    <label for="tel">Contact*</label> 
                    <input 
                        type="tel"
                        name="tel"
                        id="tel"
                        placeholder="Enter Mobile number"
                        required 
                    /> 
                    <br /><br /> 
                    <label for="gender">Gender*</label> 
                    <br /> 
                    <input type="radio" name="gender"
                        value="" id="male" /> 
                    Male 
                    <input type="radio" name="gender"
                        value="" id="female" /> 
                    Female 
                    <input type="radio" name="gender"
                        value="" id="other" /> 
                    Other 
                    <br /><br /> 
                    <label for="lang">Your best Subject</label> 
                    <br /> 
                    <input type="checkbox" name="lang"
                        id="english" checked /> 
                    English 
                    <input type="checkbox" name="lang"
                        id="maths" /> 
                    Maths 
                    <input type="checkbox" name="lang"
                        id="physics" /> 
                    Physics 
                    <br /><br /> 
                    <label for="file">Upload Resume*</label> 
                    <input 
                        type="file"
                        name="file"
                        id="file"
                        placeholder="Enter Upload File"
                        required 
                    /> 
                    <br /><br /> 
                    <label for="url">Enter URL*</label> 
                    <input 
                        type="url"
                        name="url"
                        id="url"
                        placeholder="Enter url"
                        required 
                    /> 
                    <br /><br /> 
                    <label>Select your choice</label> 
                    <select name="select" id="select"> 
                        <option value="" disabled selected> 
                            Select your Ans 
                        </option> 
                        <optgroup label="Beginers"> 
                            <option value="1">HTML</option> 
                            <option value="2">CSS</option> 
                            <option value="3">JavaScript</option> 
                        </optgroup> 
                        <optgroup label="Advance"> 
                            <option value="1">React</option> 
                            <option value="2">Node</option> 
                            <option value="3">Express</option> 
                            <option value="4">MongoDB</option> 
                        </optgroup> 
                    </select> 
                    <br /><br /> 
                    <label for="about">About</label> 
                    <br /> 
                    <textarea 
                        name="about"
                        id="about"
                        cols="30"
                        rows="10"
                        placeholder="About your self"
                        required 
                    ></textarea> 
                    <br /><br /> 
                    <label>Submit OR Reset</label> 
                    <br /> 
                    <button type="reset" value="reset"> 
                        Reset 
                    </button> 
                    <button type="submit" value="Submit"> 
                        Submit 
                    </button> 
                </form> 
            </fieldset> 
        </div> 
    ); 
} 

export default App;

Output:

Blog

Create a Form using ReactJS

Siddhesh Rajale

Join Our Newsletter. No Spam, Only the good stuff.

Related