Handling form in React.js

  1. Using HTML form data.
  2. Handling HTML data using states.
npx create-react-app frontend
npm start
import React from "react";function form(){return(<div className="form"></div>);}export default form;
import Form from "./components/Form";function App() {return (<div className=""><Form /></div>);}export default App;
import React from "react";function form(){return(<div className="form"><h2>User Form</h2><form><label htmlFor="">Username</label><br /><input type="text" placeholder="Enter your username" /><br /><label htmlFor="">Email Address</label><br /><input type="email" placeholder="Enter your Email Address" /><br /><label htmlFor="">Password</label><br /><input type="password" placeholder="Enter your Password" /><br /><button type="submit">Submit</button></form></div>);}export default form;
import React from "react";function form(){function submitForm(e){e.preventDefault()}return(<div className="form"><h2>User Form</h2><form onSubmit={submitForm}><label htmlFor="">Username</label><br /><input type="text" placeholder="Enter your username" /><br /><label htmlFor="">Email Address</label><br /><input type="email" placeholder="Enter your Email Address" /><br /><label htmlFor="">Password</label><br /><input type="password" placeholder="Enter your Password" /><br /><button type="submit">Submit</button></form></div>);}export default form;
import React, { useState } from "react";function Form(){var [username, setUsername] = useState("");var [email, setEmail] = useState("");var [password, setPassword] = useState("");function submitForm(e){e.preventDefault()}return(<div className="form"><h2>User Form</h2><form onSubmit={submitForm}><label htmlFor="">Username {username}</label><br /><input type="text" placeholder="Enter your username" onChange={(e)=>{setUsername(e.target.value)}} /><br /><label htmlFor="">Email Address {email}</label><br /><input type="email" placeholder="Enter your Email Address" onChange={(e)=>{setEmail(e.target.value)}} /><br /><label htmlFor="">Password {password}</label><br /><input type="password" placeholder="Enter your Password" onChange={(e)=>{setPassword(e.target.value)}} /><br /><button type="submit">Submit</button></form></div>);}export default Form;
import React, { useState } from "react";function Form(){var [username, setUsername] = useState("");var [email, setEmail] = useState("");var [password, setPassword] = useState("");function submitForm(e){e.preventDefault();const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;if(username!=="" || email!=="" || password!==""){if(re.test(String(email).toLowerCase())){}else{alert("Please enter a valid Email Address")}}else{alert("Please Enter all fields")}}return(<div className="form"><h2>User Form</h2><form onSubmit={submitForm}><label htmlFor="">Username {username}</label><br /><input type="text" placeholder="Enter your username" onChange={(e)=>{setUsername(e.target.value)}} /><br /><label htmlFor="">Email Address {email}</label><br /><input type="email" placeholder="Enter your Email Address" onChange={(e)=>{setEmail(e.target.value)}} /><br /><label htmlFor="">Password {password}</label><br /><input type="password" placeholder="Enter your Password" onChange={(e)=>{setPassword(e.target.value)}} /><br /><button type="submit">Submit</button></form></div>);}export default Form;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Musab Abbasi

Musab Abbasi

88 Followers

Computer Science Graduate with MERN stack website development expertise.