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