How to create a form in React?

In this article, you will learn to create a form using React JS.

To learn more about react, visit:

1. What is React?
2. Why use React?

Create React Project

Go through How to install React JS to install and set up react on your systems. After setting up your system, you need to create your react application, you can visit How to create a React app to learn to do so.

I am naming my application “react-form”, you can keep any name.

npx create-react-app react-form

Creating the application will take some time, based on your PC specifications.

Once you are done creating the application, open into any of the code editors.

Tip: I am using Visual Studio Code, you can use any of the code editors.

When you open the project folder, you will find the following sub-folders:

1. node_modules : It contains all the node modules that will be used by the application.
2. public : It contains all the resources that will be used by the application.
3. src : It contains all the code files.

1. Delete all the files from the src folder except for index.js and app.js.
2. Under the public folder, delete both the png and delete all the content of the manifest.json file.

After deleting your file structure will look like this:

Remove the following lines of code from the index.js.

import './index.css';
import reportWebVitals from './reportWebVitals';

reportWebVitals();

From app.js, remove everything from return(), as we will be replacing it with our own code.

Tip: Since I will be using Bootstrap, so you are suggested to go through How to use Bootstrap with React.

Now we will start to code.

I will be creating the following UI.

I will create each element one by one.

Tip: I have created a folder “component”, and created two components r_headers.jsx and r_Footer.jsx.

Header

<header className="p-1 bg-dark text-white">
   <nav className="site-header sticky-top py-1">
      <div className="container d-flex flex-column flex-md-row justify-content-between">

         <a href="https://www.letsreact.org/" target="_blank" rel="noreferrer"> 
            <img src="LetsReactLogo-hd.png" alt="logo" height="45px" width="200px" />
         </a>
     </div>
   </nav>
</header>

In the above code, I have used various bootstrap classes to create the UI.

• “bg-dark” to keep background dark
• “text-white” to keep text white
• “site-header sticky-top py-1” to always keep the header always at the top with a small padding
• “container d-flex flex-column flex-md-row justify-content-between” to create a flex box with all the content justified to the center of the page.

In these classes, I add the logo and program it to redirect to LetsReact.org.

Footer

<footer className="page-footer font-small bg-dark text-white ">
   <div className="footer-copyright text-center py-2">Created for  
      <a href="https://www.letsreact.org/" target="_blank" rel="noreferrer"> 
      Leats React</a>
   </div>
</footer>

In the above code, various Bootstrap classes to create UI.

1. “page-footer font-small blue bg-dark text-white” to make a footer with a dark background, light and small sized font.
2. “footer-copyright text-center py-2” to give it a dark-background copyright template look with center-aligned text.

After creating the above files, we will add these two to our index.js file. Modify your index.js as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Rheader from './component/r_header';
import Rfooter from './component/r_Footer'

ReactDOM.render(
  <React.StrictMode>
    <Rheader />
    <App />
    <Rfooter />
  </React.StrictMode>,
  document.getElementById('root')
);

Form UI

We are done creating the header and footer for our application.

Now, let’s start to create our form.

The form contains

• Label
• Input Field
• Long answer
• Dropdown menu
• Button

I will explain how we can create each of the above one by one.

Label

<label htmlFor="exampleFormControlInput1" className="form-label">Name</label>

We use the <label> tag with the following properties

• htmlFor – The htmlFor property sets or returns the value of a label’s for attribute. The for property provides the form element to which a label is connected.
• className: Bootstrap class name used to style the element.

In the same way, we can create all the labels.

Input Field

<input type="name" className="form-control" id="exampleFormControlInput1" />

We use the <input> tag with the following properties

• type – It species the input type. For Example, text, name, mobile, email, etc.
• className: Bootstrap class name used to style the element.
• id- unique ID of the tag so as to bind the lable.

In the same way, we can create all the input fields.

Long Answer

<textarea className="form-control" id="exampleFormControlTextarea1" rows="3" />

We use the <textarea> tag with the following properties

• className: Bootstrap class name used to style the element.
• id- unique ID of the tag so as to bind the lable.
• rows – It species the default number of rows with which the tag should load.

Dropdown

<select className="form-control" id="sel1">
         <option value="Select">Select</option>
         <option value="Veg Biryani">Veg Biryani</option>
         <option value="BBQ Chicken Wings">BBQ Chicken Wings</option>
         <option value="Rasmalai">Rasmlai</option>
         <option value="Beer">Beer</option>
 </select>

We use <select> and <option> tag with the following properties

• className: Bootstrap class name used to style the element.
• id- unique ID of the tag so as to bind the lable.
• value – It specifies the value that needs to be saved on selection of a particular option

Button

<button type='submit' className="btn btn-success">Submit</button>

We use <button> tag with the following properties

• type: It specifes the type of button, For example, submit, reset, etc.
• className: Bootstrap class name used to style the element.

Similarly, we can create a reset button.

Given below is the complete code of the form.

<div className="container mt-3 mb-3">
   <div className="mb-3">
      <label htmlFor="exampleFormControlInput1" className="form-label">Name</label>
      <input type="name" className="form-control" id="exampleFormControlInput1" />
   </div>
   <div className="mb-3">
      <label htmlFor="exampleFormControlInput1" className="form-label">Mobile</label>
      <input type="mobile" className="form-control" id="exampleFormControlInput1" />
   </div>
   <div className="mb-3">
      <label htmlFor="exampleFormControlInput1" className="form-label">Email address</label>
      <input type="email" className="form-control" id="exampleFormControlInput1"
 placeholder="[email protected]" />
   </div>
   <div className="mb-3">
      <label htmlFor="sel1">Menu</label>
      <select className="form-control" id="sel1">
         <option value="Select">Select</option>
         <option value="Veg Biryani">Veg Biryani</option>
         <option value="BBQ Chicken Wings">BBQ Chicken Wings</option>
         <option value="Rasmalai">Rasmlai</option>
         <option value="Beer">Beer</option>
      </select>
   </div>
   <div className="mb-3">
      <label htmlFor="exampleFormControlTextarea1" className="form-label">Order Details</label>
      <textarea className="form-control" id="exampleFormControlTextarea1" rows="3" />
   </div>
   <div className="mb-3">
      <button type='submit' className="btn btn-success">Submit</button>
      <button type='reset' className="btn btn-danger">Cancel</button>
   </div>
</div>

I have used various Bootstrap classes to create the above code.

• “container mt-3 mb-3” is used to create a container with a top and bottom margin of 3 px.
• “form-control” render us the bootstrap Form UI.
• “btn btn-success” to create a green color button.
• “btn btn-danger” to create a red color button.

Conclusion

Thanks for reading, hope you got answers to some of your questions and learned how to create a simple Form UI in React.

To learn how we can add backend functionalities to this form UI, visit here.

Visit Let’s React to learn more about React.