Fundamentally, forms are important components of any web or mobile application. An HTML or React form is typically composed of various form elements that take user input, process it, and either grant the user access or provide the information they request.
However, this is accomplished by combining programmed objects, functions, and methods. You can use forms to obtain information about a user request or data online, just like the paper form filling in real life. React forms are essential to React web applications because they let users interact with the website just like in HTML.
So in this article, let’s look at React forms, their uses, and how to create one.
Understanding React Forms
If you are using the React framework to develop a website, at some point, you might want a section where a user interacts with your website. This can be in a way that you ask a user for some inputs, which you process to give, then access or provide them with custom data.
When a user inputs data from their device and clicks “submit,” a form is said to have been submitted. So, when you hear the term “React forms,” know that it refers to a system where a user enters data that the server tracks, stores, processes, and then sends back a response.
In addition, since most React applications only load a single page, new data is dynamically added to the object. Not all form submissions go straight from the form to the server. Data is sent or displayed using additional JavaScript code after being gathered from the client-side form.
In a nutshell, you can use React forms to handle data that users enter in real-time. Remember that validating the user-submitted data is a crucial responsibility for a developer before you write your first React form program.
Let’s look at how you can create a simple React form.
React Forms: How to Create a Simple React Application that Collects User Input
You will learn how to make a simple program in this section that prompts the user for information before submitting it. This lesson’s goal is to show you how to use React forms to collect user information.
The following must be true to comprehend the example of React forms in this article:
- Node is already installed on your computer.
- You also know how to use npx to create a React app.
- Finally, you’ve installed Chrome or Firefox on your computer.
Step 1: Create a new React App
Since we are building a project just for React, it is ideal for you to create a new React application. So open your VSC, navigate to your terminal, and enter:
| npx create-react-app my-app |
If the procedure is successful, the image below will show up.
As the system creates your React application, wait until it is finished, then enter.
| cd my-app npm start |
Step 2: Enter React Input Elements
For this tutorial, we will focus on app.js and index.css files.
You may have to delete the default values in the app function and enter your custom form elements and code as shown below.
Code Example:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="cr">
<h1>Please Enter Details of the Movie You Want</h1>
{/* our form codes starts here */}
<form>
<label>Type of Movie....(e.g. Action, love, adventure)</label>
<input type="text" required />
<label>Enter Movie Year and Name of Favourite Actors </label>
<textarea type="text" required>
</textarea>
<label>Subtitle</label>
<select>
<option value="eng"> English</option>
<option value="spa">Spanish</option>
<option value="chin"> Chinese</option>
<option value="fren">French</option>
</select>
<button>Submit</button>
</form>
</div>
)
}
// to test code enter npm start in your terminal
export default App;#OUTPUT
This is the output we got from the code above. To make the interface look better, we will visit the index.css file to add some styling.
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* CSS code for our form elements starts here */
.cr {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.cr label {
text-align: left;
display: block;
}
.cr h1 {
color: rgb(145, 0, 202);
margin-bottom: 30px;
}
.cr h2 {
font-size: 20px;
color: rgb(145, 0, 202);
margin-bottom: 30px;
}
.cr input, .cr textarea, .cr select {
width: 100%;
padding: 6px 10px;
margin: 10px 0;
border: 1px solid#ddd;
box-sizing: border-box;
display: block;
}
.cr button {
background: rgb(127, 2, 230);
color: beige;
border: 0;
padding: 8px;
border-radius: 8px;
cursor: pointer;
font-size: xx-large;
}#OUTPUT
Step 3 – Keep Track of User Inputs
So far, inputs from our form are not being recognized by the system as it is not tracking what the user is entering at this stage. So let’s make the system track and store the value in a state to use later.
import './App.css';
import { useState } from 'react';
function App() {
const [title, SetTitle] = useState("")
const [movieDes, SetMovieDes] = useState("")
const [subTitle, SetSubTitle] = useState("eng")
return (
<div className="cr">
<h1>Please Enter Details of the Movie You Want</h1>
<form>
<label>Type of Movie....(e.g. Action, love, adventure)</label>
<input type="text" required value={title} onChange={(e) => SetTitle(e.target.value)} />
<label>Enter Movie Year and Name of Favourite Actors </label>
<textarea type="text" required value={movieDes} onChange={(e) => SetMovieDes(e.target.value)}>
</textarea>
<label>Subtitle</label>
<select value={subTitle} onChange={(e) => SetSubTitle(e.target.value)}>
<option value="eng"> English</option>
<option value="spa">Spanish</option>
<option value="chin"> Chinese</option>
<option value="fren">French</option>
</select>
<button>Submit</button>
<p>{movieDes}</p>
<p>{subTitle}</p>
</form>
</div>
)
}
export default App;To track the user import, we used one of the react hooks libraries known as the useState. This helps to hold the value of each input we enter in the input fields.
Step 4 – Submitting React Forms
import './App.css';
import { useState } from 'react';
function App() {
// the useStates serves as containers to track user inputs
const [title, SetTitle] = useState("");
const [movieDes, SetMovieDes] = useState("");
const [subTitle, SetSubTitle] = useState("eng");
// create function to handle the submit event
const HanSubForm = (e) => {
// code to avoid the page default action of submitting form
e.preventDefault();
// create an object to hold all the inputs as a json file
const movieObjects = {title, movieDes, subTitle};
// You can check the objects on your browser console
console.log(movieObjects);
}
return (
<div className="cr">
<h1>Please Enter Details of the Movie You Want</h1>
<form onSubmit={HanSubForm}>
<label>Type of Movie....(e.g. Action, love, adventure)</label>
<input type="text" required value={title}
onChange={(e) => SetTitle(e.target.value)} />
<label>Enter Movie Year and Name of Favourite Actors </label>
<textarea type="text" required value={movieDes}
onChange={(e) => SetMovieDes(e.target.value)} >
</textarea>
<label>Subtitle</label>
<select value={subTitle}
onChange={(e) => SetSubTitle(e.target.value)}>
<option value="eng"> English</option>
<option value="spa">Spanish</option>
<option value="chin"> Chinese</option>
<option value="fren">French</option>
</select>
<button>Submit</button>
// we use this to verify if our user inputs are tracked by the usestate
<p>{title}</p>
<p>{movieDes}</p>
<p>{subTitle}</p>
</form>
</div>
)
}
export default App;When you click submit, if you can find your inputs on the objects in the console, then the process is successful. You should now advance to how to make a post request.
Conclusion
In this tutorial, you learned how to build forms using React and handle form submissions with an example app that submits requests for movies to download. You also learned how to use React useState to track inputs.
You use this concept to create a login form that takes a users names, email, and password.
Don’t forget to check out: React Hooks: Understanding React UseState and Their Use Cases
Don’t forget to checkout: Complete React Developer (w/ Redux, Hooks, GraphQL)
