Welcome to our lesson on handling forms in React.js. Forms, which are the backbone of user interaction and data collection in web applications, are treated uniquely in React.js. Our goal is to learn how to create forms, manage their state, and handle their submissions. This lesson is fun and interactive. We'll start with form elements in React.js, move on to the interaction between forms and state, and finally wrap up with form submissions. Are you ready to roll?

Forms in React.js consist of several elements that allow users to input data. We have three main form elements: input, textarea, select, and label.

• input: This versatile element allows users to provide data input. Its appearance and behavior vary based on the type attribute. For instance, type="text" creates a simple text field, type="radio" generates a radio button, and type="checkbox" yields a checkbox. Others include type="password" for password input fields and type="submit" for submit buttons.

• textarea: This element is a text-input area typically used for inputs that require more than one sentence.

• select: This element generates a dropdown list of pre-defined options, encapsulated by option tags.

• label: Specifies a label for the associated element. Enhances user experience by binding text to its associated form control, so clicking on the label selects the control.

Let's view an example of a simple form with a text input field and a submit input button.

import { useState } from "react";

function SimpleForm() {
  const [name, setName] = useState("");
  
  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <label>
        Name: 
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <input type="submit" />
    </form>
  );
}

export default SimpleForm;

The handleNameChange function captures and updates the input value (name) every time you type into the text field.

Note that in JSX, void elements like input need closing with />.

Here is an example of using the select form element:

import { useState } from "react";

function SimpleForm() {
  const [country, setCountry] = useState("");
  
  const handleCountryChange = (event) => {
    setCountry(event.target.value);
  };

  return (
    <form>
      <label>
        Select your country: 
        <select value={country} onChange={handleCountryChange}>
            <option value="">--Please choose an option--</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Australia">Australia</option>
            { /* ... (more options) ... */ }
        </select>
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default SimpleForm;

In this example, handleCountryChange function sets the state to the selected country whenever a new country is chosen from the dropdown.