Log in and Sign up Form in HTML , CSS , JavaScript

<html>
<head>
<title>Log in Sign up</title>
<style>
#log {display:none;}
#sign {display:none;}
#d1 {position:absolute;
top:25%;
left:25%;
background-color:#B8EEF8;
box-shadow: 5px 5px 10px #000000;}
#log {position:absolute;
top:32%;
left:25%;
background-color:#B8EEF8;
box-shadow: 5px 5px 10px #000000;}
#sign {position:absolute;
top:32%;
left:25%;
background-color:#B8EEF8;
box-shadow: 5px 5px 10px #000000;}
#b1 {margin-left:20px;
margin-right:30px;
background-color: white;
color: black;
border: 2px solid #4CAF50;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b1:hover {background-color: #4CAF50;
color: white;}
#b2 {margin-right:20px;
background-color: white;
color: black;
border: 2px solid #008CBA;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b2:hover {background-color: #008CBA;
color: white;}
#b3 {margin-right:10px;
background-color: white;
color: black;
border: 2px solid #FF0000;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b3:hover {background-color: #FF0000;
color: white;}
#t1 {margin: 5px 23px;
border-radius:25px;}
#t2 {margin: 5px 23px;
border-radius:25px;}
#t3 {margin: 5px 23px;
border-radius:25px;}
#t4 {margin: 5px 23px;
border-radius:25px;}
#t5 {margin: 5px 23px;
border-radius:25px;}
#t6 {margin: 5px 23px;
border-radius:25px;}
</style>
<script>
function over1(){document.getElementById("log").style.display = "block";
document.getElementById("sign").style.display = "none";
document.getElementById("t1").required=true;
document.getElementById("t2").required=true;
document.getElementById("t3").required=false;
document.getElementById("t4").required=false;
document.getElementById("t5").required=false;
document.getElementById("t6").required=false;}
function over2(){document.getElementById("sign").style.display = "block";
document.getElementById("log").style.display = "none";}
function over3(){document.getElementById("sign").style.display = "none";
document.getElementById("log").style.display = "none";}
function change(x){document.getElementById(x).style.backgroundColor = "#D8D8F8";}
</script>
</head>
<body style="background:#DDEEFF">
<form>
<div id="d1" width="100%" height="100%"><br/>
<button onmouseover="over1()" id="b1">Log in</button>
<input type="button" onmouseover="over2()" id="b2" value="Sign up">
<button onmouseover="over3()" id="b3">x</button>
<br/><br/></div>
<div id="log">
<input type="text" placeholder=" email" onclick="change('t1')" id="t1"/><br/>
<input type="password" placeholder=" password" onclick="change('t2')" id="t2"/><br/>
</div>
<div id="sign">
<input type="text" placeholder=" username" onclick="change('t3')" id="t3"/><br/>
<input type="text" placeholder=" email" onclick="change('t4')" id="t4"/><br/>
<input type="password" placeholder=" password" onclick="change('t5')" id="t5"/><br/>
<input type="password" placeholder=" confirm password" onclick="change('t6')" id="t6"/><br/>
</div>
</form>
</body>
</html>