Today, in this blog we will learn how to create a signup form in react.js using state and functions.
Functionalities
1. Signup form will be displayed with name, mobileNo, email, password and confirm password fields and a signup button.
2. Make input fields to take input with the help of useState hook.
const [name, setName] = useState('');
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [mobileNo, setMobileNo] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')With the help of onChange event set input value of email,password,confirmPassword.
<input type="text" id="name" className="name" value={name}
onChange={(e) => setName(e.target.value)} required></input>
<input type="number" id="mobileNo" className="mobileNo" value={mobileNo}
onChange={(e) => setMobileNo(e.target.value)} required></input>
<input type="email" id="email" className="email" value={email}
onChange={(e) => setEmail(e.target.value)} required></input>
<input type="password" id="password" className="password" value={password}
onChange={(e) => setPassword(e.target.value)} required></input>
<input type="password" id="confirmPassword" className="confirmPassword"
value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required></input>Full react.js code for SignUp
import React, { useState } from 'react';
import Axios from 'react';
import './style.css'
export default function SignUp2() {
const [name, setName] = useState('');
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [mobileNo, setMobileNo] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const Handle = async (e) => {
e.preventDefault();
console.log(name, email, password, confirmPassword)
const url = ""
const data = await Axios(url, { name, email, password, confirmPassword })
console.log(data)
}
return (
<div className='signup'>
<div className='navbar'>
<h1>CodersArts</h1>
</div>
<div className='signup-body'>
<div className='signup-form'>
<div className='signup-col1'>
<h1>SignUp</h1>
<form className='form'>
<div className="input-field">
<label className='label1' htmlFor="name">Name</label>
<input type="text" id="name" className="name" value={name}
onChange={(e) => setName(e.target.value)} required></input>
</div>
<div className="input-field">
<label htmlFor="mobileNo">MobileNo</label>
<input type="number" id="mobileNo" className="mobileNo" value={mobileNo}
onChange={(e) => setMobileNo(e.target.value)} required></input>
</div>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" className="email" value={email}
onChange={(e) => setEmail(e.target.value)} required></input>
</div>
<div className="input-field">
<label htmlFor="password">Password </label>
<input type="password" id="password" className="password" value={password}
onChange={(e) => setPassword(e.target.value)} required></input>
</div>
<div className="input-field">
<label htmlFor="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" className="confirmPassword"
value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required></input>
</div>
<div className='signup-button'>
<button className='btn' onClick={(e) => Handle(e)}>SignUp</button>
</div>
</form>
</div>
<div className='signup-col2'>
<h1>CodersArts</h1>
<p>A CodersArts account lets you track your
progress as you work towards becoming a better programmer</p>
<img src={require('../../images/signup-icon.png')} alt='hy'></img>
</div>
</div>
</div>
<div className='footer'>
<h1>Footer</h1>
</div>
</div>
)
}CSS design used in login form
*{
margin: 0%;
padding: 0%;
}
.signup{
width: 100%;
height: 100%;
/* margin-bottom: 2%; */
}
.navbar{
height: 8%;
background-color: aqua;
}
.navbar h1{
margin-left: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.signup .signup-body{
height: 75%;
width: 70%;
margin-left: 20%;
margin-top: 4%;
background-color: aliceblue;
border-radius: 20px;
margin-bottom: 2%;
}
.signup-body .signup-form{
width: 100%;
align-items: center;
display: flex;
/* background-color: #102030; */
}
.signup-body .signup-form .signup-col1{
width: 50%;
height: 100%;
/* background-color: #102030; */
margin-top: 3%;
border-radius: 10px;
}
.signup-body .signup-form .signup-col1 h1{
text-align: center;
margin: 0%;
}
.signup-body .signup-form .signup-col2{
width: 50%;
height: 30rem;
margin-top: 2%;
margin-left: 3%;
margin-right: 4%;
/* height: 320px; */
border-radius: 10px;
/* background-color: #102030; */
}
.signup-col2 h1{
text-align: center;
}
.signup-col2 p{
margin: 20px;
width: 350px;
text-align: center;
margin-left: 20px;
}
.signup-col2 img{
margin-left: 90px;
}
.signup-body .signup-form .form{
/* margin-left: 30%; */
width: 100%;
margin-top: 5%;
/* background-color: aliceblue; */
border-radius: 20px;
}
.signup-body .signup-form .form .input-field{
display: flex;
margin-right: 10%;
}
.signup-body .signup-form .form .input-field label{
width: 20%;
margin-left: 20px;
margin-top: 10px;
padding: 10px;
/* background-color: #102030; */
}
.signup-body .signup-form .form .input-field .label1{
margin-top: 55px;
}
.signup-body .signup-form .form .input-field input{
width: 70%;
height: 20%;
padding: 10px;
margin: .5rem;
border-radius: 10px;
border: 1px solid black;
}
.signup-body .signup-form .form .signup-button .btn{
margin-left: 69%;
width: 20%;
height: 40px;
color: #102030;
border-radius: 10px;
background-color: rgb(252, 203, 113);
cursor: pointer;
transition: 0s ease-in-out;
margin-bottom: 5%;
}
.signup-body .signup-form .form .signup-button .btn:hover{
background-color: rgb(138, 247, 138);
}
.signup .footer{
height: 10%;
background-color: #102030;
color: aliceblue;
}Are you new to react.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.