Skip to content
Related Articles

Related Articles

How to create a form in React?
  • Difficulty Level : Expert
  • Last Updated : 31 Dec, 2020

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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' deatils .
            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;

    chevron_right

    
    

  • Filename: App.css, the file is given below contains CSS property. This file save with a .css extension.

    CSS

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .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;
    }

    chevron_right

    
    

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:

react-js-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :