React Forms

Forms let users enter data - login forms, signup forms, contact forms. Let's learn how to build them in React!

Simple Text Input

```javascript function NameForm() { const [name, setName] = useState('');

return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> <p>Hello, {name}!</p> </div> ); } ```

Complete Form Example

```javascript function SignupForm() { const [formData, setFormData] = useState({ username: '', email: '', password: '' });

const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); };

const handleSubmit = (e) => { e.preventDefault(); console.log('Form submitted:', formData); };

return ( <form onSubmit={handleSubmit}> <input name="username" value={formData.username} onChange={handleChange} placeholder="Username" />

<input name="email" type="email" value={formData.email} onChange={handleChange} placeholder="Email" />

<input name="password" type="password" value={formData.password} onChange={handleChange} placeholder="Password" />

<button type="submit">Sign Up</button> </form> ); } ```

Checkbox

```javascript function TermsForm() { const [agreed, setAgreed] = useState(false);

return ( <div> <label> <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} /> I agree to the terms and conditions </label>

<button disabled={!agreed}> Continue </button> </div> ); } ```

Radio Buttons

```javascript function GenderForm() { const [gender, setGender] = useState('');

return ( <div> <label> <input type="radio" value="male" checked={gender === 'male'} onChange={(e) => setGender(e.target.value)} /> Male </label>

<label> <input type="radio" value="female" checked={gender === 'female'} onChange={(e) => setGender(e.target.value)} /> Female </label>

<p>Selected: {gender}</p> </div> ); } ```

Select Dropdown

```javascript function CountryForm() { const [country, setCountry] = useState('usa');

return ( <div> <select value={country} onChange={(e) => setCountry(e.target.value)} > <option value="usa">United States</option> <option value="uk">United Kingdom</option> <option value="canada">Canada</option> <option value="australia">Australia</option> </select>

<p>You selected: {country}</p> </div> ); } ```

Textarea

```javascript function MessageForm() { const [message, setMessage] = useState('');

return ( <div> <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Enter your message" rows={5} />

<p>Characters: {message.length}</p> </div> ); } ```

Form Validation

Add simple validation to forms:

```javascript function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [errors, setErrors] = useState({});

const validate = () => { const newErrors = {};

if (!email) { newErrors.email = 'Email is required'; } else if (!email.includes('@')) { newErrors.email = 'Email is invalid'; }

if (!password) { newErrors.password = 'Password is required'; } else if (password.length < 6) { newErrors.password = 'Password must be at least 6 characters'; }

return newErrors; };

const handleSubmit = (e) => { e.preventDefault();

const newErrors = validate();

if (Object.keys(newErrors).length === 0) { console.log('Form is valid!'); // Submit form } else { setErrors(newErrors); } };

return ( <form onSubmit={handleSubmit}> <div> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" /> {errors.email && <p style={{color: 'red'}}>{errors.email}</p>} </div>

<div> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /> {errors.password && <p style={{color: 'red'}}>{errors.password}</p>} </div>

<button type="submit">Login</button> </form> ); } ```

Multiple Inputs with One Handler

Handle multiple inputs efficiently:

```javascript function ContactForm() { const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' });

const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); };

return ( <form> <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" /> <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" /> <input name="phone" value={formData.phone} onChange={handleChange} placeholder="Phone" /> <textarea name="message" value={formData.message} onChange={handleChange} placeholder="Message" /> <button type="submit">Send</button> </form> ); } ```

Clear Form After Submit

```javascript function FeedbackForm() { const [feedback, setFeedback] = useState('');

const handleSubmit = (e) => { e.preventDefault(); console.log('Feedback:', feedback); setFeedback(''); // Clear form alert('Thanks for your feedback!'); };

return ( <form onSubmit={handleSubmit}> <textarea value={feedback} onChange={(e) => setFeedback(e.target.value)} placeholder="Share your feedback" /> <button type="submit">Submit</button> </form> ); } ```

Form Tips

**Controlled Components:** - Form value is stored in state - React controls the input value - More predictable behavior

```javascript <input value={name} onChange={(e) => setName(e.target.value)} /> ```

**Prevent Default:** Always use `e.preventDefault()` in onSubmit to stop page reload

**Validation:** Validate before submitting - check required fields, email format, etc.

Remember

- Store form data in state - Use `value` and `onChange` for controlled inputs - Use `e.preventDefault()` in onSubmit - Validate data before submission - Show error messages clearly - Clear form after successful submit - Use `name` attribute for multiple inputs

> Next: Learn Conditional Rendering - Show/hide content based on conditions!