React JS Forms

In this tutorial, we will discuss about React JS forms, which allows user to input data and submit it for validation and processing. We will learn how to create a basic form, handle different types of input fields and validation.

Syntax

Here is the basic syntax for creating a form in React JS:

<form onSubmit={handleSubmit}>
  <label>
    Name:
    <input type="text" name="name" value={name} onChange={handleChange} />
  </label>
  <br />
  <label>
    Email:
    <input type="email" name="email" value={email} onChange={handleChange} />
  </label>
  <br />
  <input type="submit" value="Submit" />
</form>

• onSubmit attribute is used to handle form submission.
• name attribute is used to identify input fields.
• value attribute is the current value of the input field.
• onChange attribute is used to update the state of the input field.

Example

Let's see an example of a basic form in React JS:

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Name:", name);
    console.log("Email:", email);
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    if (name === "name") setName(value);
    if (name === "email") setEmail(value);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={name} onChange={handleChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" value={email} onChange={handleChange} />
        </label>
        <br />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

Output

After filling the form and clicking on submit button, the output will be shown in console:

Name: John
Email: john@example.com

Explanation

• We have used useState hook to initialize name and email states.
• The handleSubmit function prevents the default form submission and logs the values of name and email.
• The handleChange function updates the state of the input field based on the name attribute.

Use

React JS forms can be used in various scenarios, such as:

• Login and signup forms
• Contact forms
• Search forms
• Feedback forms
• Feedback forms

Important Points

• Always use the name attribute to identify input fields in a form.
• Use controlled components to handle input fields in React JS.
• Use validation techniques to validate user input before submission.
• Avoid using HTML form elements like select, textarea and button inside React components.

Summary

In this tutorial, we have learned about React JS forms, their syntax, examples, output, explanation, use, important points and summary. We have seen how to create a basic form, handle different input fields and how to validate user input. With this knowledge, you can create responsive and interactive forms in your React JS applications.