Berikut adalah contoh kode untuk membuat form login dan register flip box dengan menggunakan HTML, CSS, dan JavaScript. Dalam contoh ini, terdapat teks yang akan mengalihkan pengguna ke halaman registrasi dan sebaliknya. Ketika pengguna mengklik teks tersebut, kotak akan otomatis berpindah ke kotak berikutnya.
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Form Login dan Register Flip Box</title>
</head>
<body>
<div class="container">
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<div class="flip-box-text">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required/>
<input type="password" placeholder="Password" required/>
<input type="button" value="Login" />
</form>
<p>Belum punya akun? <a onclick="flipBox()">Daftar disini</a></p>
</div>
</div>
<div class="flip-box-back">
<div class="flip-box-text">
<h2>Register</h2>
<form>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" required/>
<input type="password" placeholder="Confirm Password" required/>
<input type="button" value="Register" required/>
</form>
<p>Sudah punya akun? <a onclick="flipBox()">Login disini</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS
CSS
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 500px;
height: default;
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
background-color: #f5f5f5;
}
.flip-box {
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #f1f1f1;
color: black;
}
.flip-box-back {
background-color: #555;
color: white;
transform: rotateY(180deg);
}
.flip-box-inner.register {
transform: rotateY(180deg);
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.flip-box-text {
text-align: center;
padding: 40px;
color: black;
}
.flip-box-text a {
color: blue;
text-decoration: underline;
cursor: pointer;
}JavaScript
JavaScript
function flipBox() {
var flipBoxInner = document.querySelector('.flip-box-inner');
flipBoxInner.classList.toggle('register');
}See the Pen Login Register Flip Box New by WebbizID (@De-Orchids) on CodePen.
Baca juga:
Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat hasilnya. Semoga contoh ini dapat membantu Anda dalam membuat form login dan register flip box menggunakan HTML, CSS, dan JavaScript.
Leave a Reply