Forms in React enable developers to make their websites more interactive. User forms are a significant part of web pages as they allow the incoming traffic to register and interact, therefore enhancing their user experience.
React also provides us with event handlers which allow us to manipulate the data present in the form component and store the data as supported by our backend framework and database. These event handlers, coupled with the onChange attribute, help us maintain the state of the fields present in our Form.
Note: As React has a component-based architecture, the data filled in by the user is maintained by the
Formcomponent itself.
The visualization below will help us understand the Form component and its usage:
Let's look at a code example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Note: This answer assumes that you have a separate project directory with all the necessary pre-installed dependencies for React framework. For reference, please refer to this
. link https://react.dev/learn/start-a-new-react-project
The explanation of the code residing in the form.jsx file is as follows:
Lines 5 to 7: We use the useState hook and declare variables that help us save the information the user fills in. The useState hook allows us to save the state in the Form component.
Lines 9 to 17: Each function, for instance, handleName() , gets triggered when the user types in the respective input field. These functions are bound to the input field using the onChange and the value attribute, which helps us dynamically maintain the component's state. The setter functions help set the value of the variables. For example, setName() is used to set the name as the user types it in the username field. The e.target.value represents the users' input as the user fills in the desired input field.
Lines 19 to 21: Execution of this code takes place when the user clicks on the submitbutton in line 43 and displays the user's information using a JavaScript alert().
Lines 23 to 46: These lines of code encapsulate the HTML used to render the form component, as shown in the output tab above. The explanation for the code enclosed in the return statement is as follows:
The input tags are there to take the input along with label tags that specify their labels accordingly.
The type attribute is to define what type of content the input tag can support.
The required attribute specifies that the user must enter the field before submitting the form.
Note: To read more on
typeattribute, please visit this link.
Free Resources