Index.html
<!DOCTYPE html>
<html>
<head>
<title>Register Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="wecome.html" method="post">
<div>
<label for="name">Full Name</label>
<input type="text" name="name" placeholder="Full name">
<span></span>
<label for="email">Emai</label>
<input type="email" name="email" placeholder="lakhant99@gmail.com">
<span></span>
</div>
<div>
<label for="username">Usernam</label>
<input type="text" name="username" placeholder="Full name">
<span></span>
<label for="password">Password</label>
<input type="email" name="password" placeholder="password">
<span></span>
</div>
<div>
<label for="number">Number</label>
<input type="number" name="number" placeholder="phone number">
<span></span>
<label for="Dob">Date of birth</label>
<input type="date" name="DOB" placeholder="Date of birth">
<span></span>
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="gender"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> other
<span></span>
<label for="image">Profile Picture</label>
<input type="file" name="image">
<span></span>
</div>
<button name="prev">Previous</button>
<button name="next">Next</button>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
</section>
</form>
</body>
</html>
<script type="text/javascript" src="add.js"></script>
style.css
form{
width: 600px;
margin: 200px auto;
}
div {
width: 100%;
margin: 15px auto;
display: none;/*main*/
}
label {
display: block;
padding: 20px;
font-size: 25px;
}
input {
width: 96%;
padding: 10px;
border: 1px solid #797979;
margin-left: 20px;
font-size: 20px;
border-radius: 3px;
}
span {
display: block;
color: red;
font-style: italic;
margin-left: 20px;
}
input[type="radio"] {
display: inline-flex;
width: 20px;
}
button {
margin: 20px;
padding: 10px;
width: 100px;
border: none;
outline: none;
cursor: pointer;
border-radius: 5px;
background: linear-gradient(90deg, royalblue, lightgreen);
font-size: 20px;
font-weight: bold;
color: whitesmoke;
float: left;
}
section {
width: 100%;
margin: 20px auto;
text-align: center;
float: right;
}
p {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ededed;
margin: 2px 5px;
display: inline-flex;
}
add.js
var div = document.getElementsByTagName('div');
var button = document.getElementsByTagName('button');
var p = document.getElementsByTagName('p');
var form = document.getElementsByTagName('form')[0];
form.onsubmit =()=>{return false}
var current_div = 0;
div[current_div].style.display = "block";
if(current_div == 0){
button[0].style.display = 'none';
p[0].style.backgroundColor = 'royalblue';
}
button[1].onclick = ()=> {
current_div++;
var back_div = current_div - 1;
if((current_div > 0) && (current_div < 4))
{
button[0].style.display = 'block';
div[current_div].style.display = 'block';
div[back_div].style.display = "none";
p[current_div].style.backgroundColor = "royalblue";
p[back_div].style.backgroundColor = "#ededed";
if (current_div == 3)
{
button[1].innerHTML = "Sing-up";
}
}
else{
if(current_div > 3)
{
form.onsubmit =()=>{return true}
}
}
}
button[0].onclick = () => {
if(current_div > 0){
current_div--;
var back_div = current_div + 1;
div[current_div].style.display = 'block';
div[back_div].style.display = "none";
p[current_div].style.backgroundColor = "royalblue";
p[back_div].style.backgroundColor = "#ededed";
if(current_div < 3)
{
button[1].innerHTML = "Next";
}
}
if (current_div == 0)
{
button[0].style.display = 'none';
}
}
console.log(div);
No comments:
Post a Comment
If you have any problem please let me know.