Forms are used to collect information from users. In React, forms can
be created using normal HTML form elements such as
<input>, <textarea>,
<select>, and <button>.
React can manage the values entered by users using state and event
handlers.
onChange and onSubmit to manage user input.
A form is a user interface element used to collect information from users.
Examples include:
<form>
<input type="text" />
<button type="submit">
Submit
</button>
</form>React uses the same basic HTML form elements, but JavaScript and React events can be used to control their behavior.
function App() {
return (
<form>
<input type="text" />
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
The <input> element is commonly used to collect
short pieces of information.
<input
type="text"
placeholder="Enter your name"
/>Common input types include:
A text input can be used to collect information such as a name.
function App() {
return (
<div>
<label>
Name:
</label>
<input type="text" />
</div>
);
}React state can be used to store the value entered into an input.
import { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
Here, name stores the current input value.
The onChange event runs when the value of an input
changes.
function App() {
const [name, setName] = useState("");
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}Every time the user changes the input, the state can be updated.
The current input value can be accessed using
e.target.value.
function handleChange(e) {
console.log(e.target.value);
}
The target represents the form element that triggered the
event.
A value stored in state can be displayed on the screen.
import { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
<h2>
Hello {name}
</h2>
</div>
);
}
A form can be submitted using a button with
type="submit".
<form>
<input type="text" />
<button type="submit">
Submit
</button>
</form>
React provides the onSubmit event for handling form
submission.
function App() {
function handleSubmit(e) {
e.preventDefault();
console.log("Form submitted");
}
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">
Submit
</button>
</form>
);
}
Normally, submitting an HTML form can cause a browser navigation or
page reload. In React, e.preventDefault() can be used to
prevent the browser's default form submission behavior.
function handleSubmit(e) {
e.preventDefault();
console.log("Form submitted");
}import { useState } from "react";
function App() {
const [name, setName] = useState("");
function handleSubmit(e) {
e.preventDefault();
alert("Hello " + name);
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
The email input type can be used for email addresses.
const [email, setEmail] = useState("");
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email"
/>A password field hides the characters typed by the user.
const [password, setPassword] = useState("");
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password"
/>A number input can be used to collect numeric information.
const [age, setAge] = useState("");
<input
type="number"
value={age}
onChange={(e) => setAge(e.target.value)}
/>
The <textarea> element is useful when users need to
enter multiple lines of text.
const [message, setMessage] = useState("");
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Enter your message"
/>
A <select> element allows users to choose an option
from a list.
const [course, setCourse] = useState("");
<select
value={course}
onChange={(e) => setCourse(e.target.value)}
>
<option value="">
Select Course
</option>
<option value="react">
React
</option>
<option value="python">
Python
</option>
</select>A checkbox can be controlled using a boolean state value.
const [agree, setAgree] = useState(false);
<label>
<input
type="checkbox"
checked={agree}
onChange={(e) => setAgree(e.target.checked)}
/>
I agree to the terms
</label>Radio buttons allow users to choose one option from a group.
const [gender, setGender] = useState("");
<label>
<input
type="radio"
name="gender"
value="male"
checked={gender === "male"}
onChange={(e) => setGender(e.target.value)}
/>
Male
</label>
<label>
<input
type="radio"
name="gender"
value="female"
checked={gender === "female"}
onChange={(e) => setGender(e.target.value)}
/>
Female
</label>A form can contain multiple fields. Each field can have its own state.
const [name, setName] = useState("");
const [email, setEmail] = useState("");
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>Multiple form fields can also be stored inside one state object.
const [form, setForm] = useState({
name: "",
email: ""
});This approach can be useful for larger forms.
function handleChange(e) {
setForm({
...form,
[e.target.name]: e.target.value
});
}The spread operator keeps the existing form values while updating the field that changed.
When using one state object, the name attribute can be
used to identify each form field.
<input
name="name"
value={form.name}
onChange={handleChange}
/>
<input
name="email"
value={form.email}
onChange={handleChange}
/>
Checkboxes normally use checked and
e.target.checked because their value represents a
boolean state.
const [isStudent, setIsStudent] = useState(false);
<input
type="checkbox"
checked={isStudent}
onChange={(e) => setIsStudent(e.target.checked)}
/>After submission, the collected form data can be displayed or sent to another function or service.
function handleSubmit(e) {
e.preventDefault();
console.log("Name:", form.name);
console.log("Email:", form.email);
}After successful submission, state can be reset to clear the form.
function handleSubmit(e) {
e.preventDefault();
console.log(form);
setForm({
name: "",
email: ""
});
}Before submitting a form, you can check whether required values have been entered.
function handleSubmit(e) {
e.preventDefault();
if (form.name === "") {
alert("Name is required");
return;
}
console.log("Form submitted");
}import { useState } from "react";
function App() {
const [form, setForm] = useState({
name: "",
email: "",
course: ""
});
function handleChange(e) {
setForm({
...form,
[e.target.name]: e.target.value
});
}
function handleSubmit(e) {
e.preventDefault();
if (!form.name || !form.email || !form.course) {
alert("Please fill all fields");
return;
}
console.log(form);
}
return (
<form onSubmit={handleSubmit}>
<input
name="name"
value={form.name}
onChange={handleChange}
placeholder="Name"
/>
<br />
<input
name="email"
value={form.email}
onChange={handleChange}
placeholder="Email"
/>
<br />
<select
name="course"
value={form.course}
onChange={handleChange}
>
<option value="">
Select Course
</option>
<option value="react">
React
</option>
<option value="python">
Python
</option>
</select>
<br />
<button type="submit">
Register
</button>
</form>
);
}
export default App;A controlled form element gets its current value from React state and updates that state when the user changes the field.
const [name, setName] = useState("");
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>This gives React control over the current value of the input.
onChange to update controlled inputs.onSubmit to handle form submission.preventDefault() when appropriate.checked for controlled checkboxes.e.target.checked to read checkbox state.value for controlled text inputs.onChange handles changes in form fields.onSubmit handles form submission.preventDefault() prevents the browser's default submission behavior.checked and e.target.checked.value.Question: Which React event is commonly used to handle form submission?