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(''); // function to update state of name with // value enter by user in form const handleChange =(e)=>{ setName(e.target.value); } // function to update state of age with value // enter by user in form const handleAgeChange =(e)=>{ setAge(e.target.value); } // function to update state of email with value // enter by user in form const handleEmailChange =(e)=>{ setEmail(e.target.value); } // function to update state of password with // value enter by user in form const handlePasswordChange =(e)=>{ setPassword(e.target.value); } // function to update state of confirm password // with value enter by user in form const handleConfPasswordChange =(e)=>{ setConfPassword(e.target.value); } // below function will be called when user // click on submit button . const handleSubmit=(e)=>{ if(password!=confPassword) { // if 'password' and 'confirm password' // does not match. alert("password Not Match"); } else{ // display alert box with user // 'name' and 'email' details . 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)}}> {/*when user submit the form , handleSubmit() function will be called .*/} <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/> { /*when user write in name input box , handleChange() function will be called. */} <label > Age: </label><br/> <input type="text" value={age} required onChange={(e) => {handleAgeChange(e)}} /><br/> { /*when user write in age input box , handleAgeChange() function will be called. */} <label> Email: </label><br/> <input type="email" value={email} required onChange={(e) => {handleEmailChange(e)}} /><br/> {/* when user write in email input box , handleEmailChange() function will be called.*/} <label> Password: </label><br/> <input type="password" value={password} required onChange={(e) => {handlePasswordChange(e)}} /><br/> {/* when user write in password input box , handlePasswordChange() function will be called.*/} <label> Confirm Password: </label><br/> <input type="password" value={confPassword} required onChange={(e) => {handleConfPasswordChange(e)}} /><br/> {/* when user write in confirm password input box , handleConfPasswordChange() function will be called.*/} <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: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); 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:
