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:
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.
// Filename - App.js './App.css' ;
import Form from "./Form"
function App() {
return (
<div className= "App" >
<Form />
</div>
);
} export default App;
|
// 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>
);
} |
/* 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.