React Forms

Forms are an integral part of any modern web application. It allows the users
to interact with the application as well as gather information from the users.
Forms can perform many tasks that depend on the nature of your business
requirements and logic such as authentication of the user, adding user,
searching, filtering, booking, ordering, etc. A form can contain text fields,
buttons, checkbox, radio button, etc.

In React, form data is usually handled by the components. When the data is
handled by the components, all the data is stored in the component state. You
can control changes by adding event handlers in the onChange attribute and
that event handler will be used to update the state of the variable.

Adding Forms in React

You add a form with React like any other element:

function MyForm() {

return (

<form>

<label>Enter your name:

<input type="text" />

</label>

</form>

Handling Forms
Handling forms is about how you handle the data when it changes value or
gets submitted.

In React, form data is usually handled by the components.

When the data is handled by the components, all the data is stored in the
component state.

You can control changes by adding event handlers in the onChange attribute.

We can use the useState Hook to keep track of each inputs.

import { useState } from 'react';

function MyForm() {

const [name, setName] = useState("");

return (

<form>

<label>Enter your name:

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

/>

</label>

</form>

Submitting Forms
You can control the submit action by adding an event handler in
the onSubmit attribute for the <form>:

import { useState } from 'react';

function MyForm() {

const [name, setName] = useState("");

const handleSubmit = (event) => {

event.preventDefault();

alert(`The name you entered was: ${name}`)

}
 return (

<form onSubmit={handleSubmit}>

<label>Enter your name:

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

/>

</label>

<input type="submit" />

</form>

Textarea
The textarea element in React is slightly different from ordinary HTML.

In React the value of a textarea is placed in a value attribute. We'll use

the useState Hook to mange the value of the textarea:

import { useState } from 'react';

function MyForm() {

const [textarea, setTextarea] = useState(

"The content of a textarea goes in the value attribute"

);

const handleChange = (event) => {

setTextarea(event.target.value)

}
 return (

<form>

<textarea value={textarea} onChange={handleChange} />

</form>

Select
A drop down list, or a select box, in React is also a bit different from HTML.

In React, the selected value is defined with a value attribute on

the select tag:

function MyForm() {

const [myCar, setMyCar] = useState("Volvo");

const handleChange = (event) => {

setMyCar(event.target.value)

return (

<form>

<select value={myCar} onChange={handleChange}>

<option value="Ford">Ford</option>

<option value="Volvo">Volvo</option>

<option value="Fiat">Fiat</option>

</select>

</form>

}
Radio Button
Program:- Create a React Form for select any of pizza size using radio button.

import React from 'react';

import { useState } from 'react';
function Myform() {
const [topping, setTopping] = useState('Medium');
const onOptionChange = e => {
setTopping(e.target.value);
};
return (
<div>
<h3>Select Pizza Size</h3>
<form>
<input
type='radio'
name='topping'
value='Regular'
checked={topping === 'Regular'}
onChange={onOptionChange}
/>
<label>Regular</label>

<input
type='radio'
name='topping'
value='Medium'
checked={topping === 'Medium'}
onChange={onOptionChange}
/>
 <label>Medium</label>

<input
type='radio'
name='topping'
value='Large'
checked={topping === 'Large'}
onChange={onOptionChange}
/>
<label>Large</label>
</form>
<p>
Select topping <strong>{topping}</strong>
</p>
</div>
);
}
export default Myform

Program:- Create a React Form for email and password validation.

import React ,{ useState} from 'react'

const Formapplication = () =>

{
const[email,setEmail]= useState("");
const[pass,setPass]= useState("");
const handleEmailchange=((e)=>
{
setEmail(e.target.value);
});
const handlePasswordchange=((e)=>
{
setPass(e.target.value);
});
 const handleSubmit=((e)=>
{
e.preventDefault();
const regexEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
const regexPass=/^[A-Za-z]\w{8,}$/;

if(!regexEmail.test(email))
{ alert("enter valid email address");}
if(!regexPass.test(pass))
{ alert("Password must have 8 characters which contain only
characters, numeric digits, underscore and first
character must be a letter");
}

setEmail("");
setPass("");
} );

return (

<form onSubmit={handleSubmit}>
<label>E-Mail:
<input type="email" value={email} onChange={handleEmailchange}/>
</label> <br/>
<label>Password:
<input type="password"value={pass} onChange={handlePasswordchange}/>
</label> <br/>

<button type="submit">submit</button>
</form>

)
}

export default Formapplication

Program:- Create a Sign-up form using React asking for username,

age, email, password, and confirm password. When the user clicks
on the ‘submit’ button, it will display an alert box with a username,
age, and email details entered by the user.
import React, {useState} from 'react';
function App1() {
const [name , setName] = useState('');
const [age , setAge] = useState('');
const [email , setEmail] = useState('');
 const [password , setPassword] = useState('');
const [confPassword , setConfPassword] = useState('');
const handleChange =(e)=>{
setName(e.target.value);
}
const handleAgeChange =(e)=>{
setAge(e.target.value);
}
const handleEmailChange =(e)=>{
setEmail(e.target.value);
}
const handlePasswordChange =(e)=>{
setPassword(e.target.value);
}
const handleConfPasswordChange =(e)=>{
setConfPassword(e.target.value);
}
const handleSubmit=(e)=>{
if(password!=confPassword)
{ alert("password Not Match");
}
else{
alert('A form was submitted with Name :"' + name +
'" ,Age :"'+age +'" and Email :"' + email + '"');
}
e.preventDefault();
}
return (
<div >
<form onSubmit={(e) => {handleSubmit(e)}}>
<h3> Sign-up Form </h3>
 <label >
Name:
</label><br/>
<input type="text" value={name} required onChange={(e)
=> {handleChange(e)}} /><br/>
<label >
Age:
</label><br/>
<input type="text" value={age} required onChange={(e)
=> {handleAgeChange(e)}} /><br/>
<label>
Email:
</label><br/>
<input type="email" value={email} required onChange={(e)=>
{handleEmailChange(e)}} /><br/>
<label>
Password:
</label><br/>
<input type="password" value={password} required
onChange={(e) => {handlePasswordChange(e)}} /><br/>
<label>
Confirm Password:
</label><br/>
<input type="password" value={confPassword} required
onChange={(e)=> {handleConfPasswordChange(e)}} /><br/> <input
type="submit" value="Submit"/>
</form>
</div>
);
}
export default App1;