How to create a form in React?
React uses forms to allow users to interact with the web page. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute and that event handler will be used to update the state of the variable.
Setup steps:
Make a folder by writing ‘mkdir folder Name’ in your command prompt terminal.
mkdir forms
Now, navigate to the forms’ folder by writing the below commands in the command prompt terminal.
cd forms
Create a React project by writing ‘npx create-react-app <folder name>’ in command prompt window :
npx create-react-app form
Now, navigate to the ‘form’ folder by writing the below commands in the command prompt terminal.
cd form
Type the below command to run your project on the browser localhost: 3000
npm start
Example: Create a Sign-up form using React asking for username, age, email, password, and confirm password. When the user clicks on the ‘submit’ button, it will display an alert box with a username, age, and email details entered by the user.
Code Explanation:
Step 1: In the Function component ‘App’, we initialize the name, email, password, and confirm password state to empty value by using the ‘useState’ hook.
Step 2: When the user types in the name input box, ‘handleChange()’ function will be the trigger that will update the state of the name variable with the help of the ‘setName’ variable.
Step 3: Similarly when the user types in the age input box, ‘handleAgeChange()’ function will be the trigger that will update the state of the age variable with the help of the ‘setAge’ variable.
Step 4: Similarly when the user types in the email input box, ‘handleEmailChange()’ function will be the trigger that will update the state of the email variable with the help of ‘setEmail’ variable.
Step 5: Similarly when the user types in the password input box, ‘handlePasswordChange()’ function will be the trigger that will update the state of the password variable with the help of the ‘setPassword’ variable.
Step 6: Similarly when the user types in the confirmation password input box, ‘handleConfPasswordChange()’ function will be the trigger that will update the state of confPassword variable with the help of ‘setConfPassword’ variable.
Step 7: when the user submits the form, ‘handleSubmit()’ function will be trigger, which will check if ‘password’ and ‘confirm password’ is the same or not if the password is the same, an alert box will be displayed with details enter by the user in form and if the password is not same an alert box will display with the same reason.
Example:
Filename: App.js
Javascript
import React, {useState} from 'react' ;
import ReactDOM from 'react-dom' ;
import './App.css' ;
function App() {
const [name , setName] = useState( '' );
const [age , setAge] = useState( '' );
const [email , setEmail] = useState( '' );
const [password , setPassword] = useState( '' );
const [confPassword , setConfPassword] = useState( '' );
const handleChange =(e)=>{
setName(e.target.value);
}
const handleAgeChange =(e)=>{
setAge(e.target.value);
}
const handleEmailChange =(e)=>{
setEmail(e.target.value);
}
const handlePasswordChange =(e)=>{
setPassword(e.target.value);
}
const handleConfPasswordChange =(e)=>{
setConfPassword(e.target.value);
}
const handleSubmit=(e)=>{
if (password!=confPassword)
{
alert( "password Not Match" );
}
else {
alert( 'A form was submitted with Name :"' + name +
'" ,Age :"' +age + '" and Email :"' + email + '"' );
}
e.preventDefault();
}
return (
<div className= "App" >
<header className= "App-header" >
<form onSubmit={(e) => {handleSubmit(e)}}>
{
}
<h2> Geeks For Geeks </h2>
<h3> Sign-up Form </h3>
<img src= "/gfg.png" />
<label >
Name:
</label><br/>
<input type= "text" value={name} required onChange={(e)
=> {handleChange(e)}} /><br/>
{
}
<label >
Age:
</label><br/>
<input type= "text" value={age} required onChange={(e)
=> {handleAgeChange(e)}} /><br/>
{
}
<label>
Email:
</label><br/>
<input type= "email" value={email} required onChange={(e)
=> {handleEmailChange(e)}} /><br/>
{
}
<label>
Password:
</label><br/>
<input type= "password" value={password} required onChange={(e)
=> {handlePasswordChange(e)}} /><br/>
{
}
<label>
Confirm Password:
</label><br/>
<input type= "password" value={confPassword} required onChange={(e)
=> {handleConfPasswordChange(e)}} /><br/>
{
}
<input type= "submit" value= "Submit" />
</form>
</header>
</div>
);
}
export default App;
|
Filename: App.css, the file is given below contains CSS property. This file save with a .css extension.
CSS
.App {
text-align : center ;
}
form {
border : 2px solid green ;
padding : 30px ;
}
img{
height : 120px ;
margin-left : 90px ;
margin-bottom : 10px ;
display : block ;
border : 1px solid black ;
border-radius: 50% ;
}
.App-header {
background-color : white ;
min-height : 100 vh;
display : flex;
flex- direction : column;
align-items: center ;
justify- content : center ;
font-size : calc( 10px + 2 vmin);
color : black ;
}
|
Output:
When the user clicks on the submit button, it displays an alert box with a username, age, and email details entered by the user in the form:
Full Page view:
When ‘password’ and ‘confirm password’ in a form do not match, it will display an alert box with the message ‘password not match ‘.
If any form field (name, age, password and confirm password) is empty, the ‘required’ attribute prevents this form from being submitted:
Last Updated :
04 Dec, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...