Open In App

How to Develop User Registration Form in React JS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Form is usually defined inside the <form> tag in conventional HTML code and also in ReactJS. It can have the usual form submission behavior that can take it to a new page but that will not make use of React’s full potential, instead, as we all know it is done using React components.

Prerequisites:

Approach:

To Develop a User Registration Form in React JS, we will use the HTML form and input tags to get the user input. Store these values with the onChange method in the useState Hook variables. Add the validations for input fields when the form is submitted using the Submit button. Style the Registration form using CSS classes and properties.

handleChange = () => { 
function logic ....
};
.
.
.
<form>
<input value={name} onChange={handleChange}/>
</form>

Steps to create the React application:

Step 1: Create React Project 

npm create-react-app myreactapp

Step 2: Change your directory and enter your main folder.

cd myreactapp

Project Structure:

Project Structure

Example: This example demonstrates a simple registration form with name, email and password input fields using HTML Form and HTML Input and manipulate the state using useState Hook.

Javascript




// Filename - App.js
 
'./App.css';
import Form from "./Form"
 
function App() {
    return (
        <div className="App">
            <Form />
        </div>
 
    );
}
 
export default App;


Javascript




// Filename - Form.js
 
import { useState } from "react";
 
export default function Form() {
    // States for registration
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
 
    // States for checking the errors
    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState(false);
 
    // Handling the name change
    const handleName = (e) => {
        setName(e.target.value);
        setSubmitted(false);
    };
 
    // Handling the email change
    const handleEmail = (e) => {
        setEmail(e.target.value);
        setSubmitted(false);
    };
 
    // Handling the password change
    const handlePassword = (e) => {
        setPassword(e.target.value);
        setSubmitted(false);
    };
 
    // Handling the form submission
    const handleSubmit = (e) => {
        e.preventDefault();
        if (name === "" || email === "" || password === "") {
            setError(true);
        } else {
            setSubmitted(true);
            setError(false);
        }
    };
 
    // Showing success message
    const successMessage = () => {
        return (
            <div
                className="success"
                style={{
                    display: submitted ? "" : "none",
                }}
            >
                <h1>User {name} successfully registered!!</h1>
            </div>
        );
    };
 
    // Showing error message if error is true
    const errorMessage = () => {
        return (
            <div
                className="error"
                style={{
                    display: error ? "" : "none",
                }}
            >
                <h1>Please enter all the fields</h1>
            </div>
        );
    };
 
    return (
        <div className="form">
            <div>
                <h1>User Registration</h1>
            </div>
 
            {/* Calling to the methods */}
            <div className="messages">
                {errorMessage()}
                {successMessage()}
            </div>
 
            <form>
                {/* Labels and inputs for form data */}
                <label className="label">Name</label>
                <input
                    onChange={handleName}
                    className="input"
                    value={name}
                    type="text"
                />
 
                <label className="label">Email</label>
                <input
                    onChange={handleEmail}
                    className="input"
                    value={email}
                    type="email"
                />
 
                <label className="label">Password</label>
                <input
                    onChange={handlePassword}
                    className="input"
                    value={password}
                    type="password"
                />
 
                <button onClick={handleSubmit} className="btn" type="submit">
                    Submit
                </button>
            </form>
        </div>
    );
}


CSS




/* Filename: App.css */
 
.App {
    text-align: center;
    background-color: green;
}
 
.label {
    display: block;
    font-size: larger;
    color: white;
    padding: 5px;
}
 
.input {
    font-size: larger;
    padding: 5px;
    margin: 2px;
 
}
 
.btn {
    color: white;
    background-color: red;
    border-radius: 5px;
    font-size: larger;
    display: block;
    padding: 5px;
    margin: 10px auto;
}
 
.messages {
    display: flex;
    justify-content: center;
}
 
.error {
    display: block;
    background-color: red;
    color: white;
    width: fit-content;
    height: 50px;
    padding: 5px;
}
 
.success {
    display: block;
    background-color: lightblue;
    color: black;
    width: fit-content;
    height: 50px;
    padding: 5px;
}


Steps to Run the Applicaiton: Run the application using the following command:

npm start

Output: This output is visible on the http://localhost:3000/ on the browser window.

Output



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads