📄Assignments Of Class 9
Forms in React
Assignment 1: Create a Simple
Controlled Input
Task:
Create a React component with a single text input that displays the current
input value below it in real-time.
Solution:
import React, { useState } from 'react';
function SimpleInput() {
const [text, setText] = useState('');
return (
<div>
<input
type="text"
value={text}
onChange={(e) =>
setText(e.target.value)}
placeholder="Type
something..."
/>
<p>You typed: {text}</p>
</div>
);
}
export default SimpleInput;
Assignment 2: Create a Controlled
Textarea Component
Task:
Make a textarea where users can write a description. Show the character count
below the textarea.
Solution:
import React, { useState } from 'react';
function TextareaWithCount() {
const [description, setDescription] = useState('');
return (
<div>
<textarea
value={description}
onChange={(e) =>
setDescription(e.target.value)}
placeholder="Write
description..."
rows={4}
cols={30}
/>
<p>Characters: {description.length}</p>
</div>
);
}
export default TextareaWithCount;
Assignment 3: Create a Select
Dropdown and Display Selection
Task:
Create a select dropdown with options: Apple, Banana, Cherry. Display the
selected fruit below the dropdown.
Solution:
import React, { useState } from 'react';
function FruitSelector() {
const [fruit, setFruit] = useState('Apple');
return (
<div>
<select value={fruit} onChange={(e) =>
setFruit(e.target.value)}>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
</select>
<p>You selected: {fruit}</p>
</div>
);
}
export default FruitSelector;
Assignment 4: Create a Form with
Name and Email Input and Alert Values on Submit
Task:
Create a form with two inputs: Name and Email. On form submission, show an
alert with the entered name and email.
Solution:
import React, { useState } from 'react';
function NameEmailForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`Name: ${name}\nEmail: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
required
/><br/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
required
/><br/>
<button type="submit">Submit</button>
</form>
);
}
export default NameEmailForm;
Assignment 5: Create a Registration
Form with Password Field and Display Values on Submit
Task:
Add a password input to the form in Assignment 4. Show all three values (Name,
Email, Password) below the form on submission.
Solution:
import React, { useState } from 'react';
function RegistrationForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [submittedData, setSubmittedData] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData({ name, email, password });
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
required
/><br/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
required
/><br/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) =>
setPassword(e.target.value)}
required
/><br/>
<button type="submit">Register</button>
</form>
{submittedData && (
<div>
<h3>Submitted Data:</h3>
<p>Name: {submittedData.name}</p>
<p>Email: {submittedData.email}</p>
<p>Password:
{submittedData.password}</p>
</div>
)}
</div>
);
}
export default RegistrationForm;
Assignment 6: Create a Form with
Select Dropdown and Textarea Inputs
Task:
Create a feedback form with a select input for rating (1 to 5) and a textarea
for comments. Display submitted feedback below the form.
Solution:
import React, { useState } from 'react';
function FeedbackForm() {
const [rating, setRating] = useState('5');
const [comments, setComments] = useState('');
const [feedback, setFeedback] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
setFeedback({ rating, comments });
};
return (
<div>
<form onSubmit={handleSubmit}>
<label>Rating:</label>
<select value={rating} onChange={(e)
=> setRating(e.target.value)}>
<option value="1">1 -
Poor</option>
<option value="2">2 -
Fair</option>
<option value="3">3 -
Good</option>
<option value="4">4 -
Very Good</option>
<option value="5">5 -
Excellent</option>
</select><br/>
<label>Comments:</label><br/>
<textarea
value={comments}
onChange={(e) =>
setComments(e.target.value)}
rows={4} cols={30}
placeholder="Write your comments
here..."
></textarea><br/>
<button type="submit">Submit
Feedback</button>
</form>
{feedback && (
<div>
<h3>Your Feedback:</h3>
<p>Rating: {feedback.rating}</p>
<p>Comments:
{feedback.comments}</p>
</div>
)}
</div>
);
}
export default FeedbackForm;
Assignment 7: Validate Email Format
Before Form Submission
Task:
Extend Assignment 4 by validating the email format on submission. If invalid,
show an error message instead of alert.
Solution:
import React, { useState } from 'react';
const [email, setEmail] = useState('');
const [name, setName] = useState('');
const [error, setError] = useState('');
const validateEmail = (email) => {
// Simple regex for email validation
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
};
const handleSubmit = (e) => {
e.preventDefault();
if (!validateEmail(email)) {
setError('Please enter a valid email.');
} else {
setError('');
alert(`Name: ${name}\nEmail: ${email}`);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
required
/><br/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
required
/><br/>
{error && <p style={{ color: 'red' }}>{error}</p>}
<button type="submit">Submit</button>
</form>
);
}
export default EmailValidationForm;
Assignment 8: Disable Submit Button
if Required Fields Are Empty
Task:
In the registration form (Assignment 5), disable the submit button until the
Name, Email, and Password fields are all filled.
Solution:
import React, { useState } from 'react';
function RegistrationWithDisable() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [submittedData, setSubmittedData] = useState(null);
const isFormValid = name && email && password;
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData({ name, email, password });
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
required
/><br/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
required
/><br/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) =>
setPassword(e.target.value)}
required
/><br/>
<button type="submit" disabled={!isFormValid}>Register</button>
</form>
{submittedData && (
<div>
<h3>Submitted Data:</h3>
<p>Name: {submittedData.name}</p>
<p>Email: {submittedData.email}</p>
<p>Password:
{submittedData.password}</p>
</div>
)}
</div>
);
}
export default RegistrationWithDisable;
Assignment 9: Clear Form Inputs
After Submission
Task:
Modify the registration form (Assignment 5) to clear all inputs after
successful submission.
Solution:
import React, { useState } from 'react';
function ClearFormOnSubmit() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [submittedData, setSubmittedData] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData({ name, email, password });
// Clear inputs
setName('');
setEmail('');
setPassword('');
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
required
/><br/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
required
/><br/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) =>
setPassword(e.target.value)}
required
/><br/>
<button type="submit">Register</button>
</form>
{submittedData && (
<div>
<h3>Submitted Data:</h3>
<p>Name: {submittedData.name}</p>
<p>Email: {submittedData.email}</p>
<p>Password:
{submittedData.password}</p>
</div>
)}
</div>
);
}
export default ClearFormOnSubmit;
Assignment 10: Show Real-time
Validation Messages for Empty Fields
Task:
Create a form with Name and Email inputs that shows a real-time validation
message below each input if the field is empty.
Solution:
import React, { useState } from 'react';
function RealTimeValidationForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
return (
<form>
<div>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
/>
{name.trim() === '' && <p style={{
color: 'red' }}>Name is required.</p>}
</div>
<div>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
/>
{email.trim() === '' && <p style={{
color: 'red' }}>Email is required.</p>}
</div>
<button type="submit" disabled={name.trim() === '' || email.trim()
=== ''}>
Submit
</button>
</form>
);
}
export default RealTimeValidationForm;
Summary
These
assignments cover:
- Controlled inputs (text,
textarea, select)
- Handling form submission and
preventing default behavior
- Displaying submitted data
- Validation (required fields,
email format)
- Disabling submit buttons based
on validation
- Clearing form inputs after
submit
- Real-time validation messages
·
