Pada tutorial sebelumnya, kita sudah belajar Cara Membuat Efek Overlay Pada Gambar Menggunakan CSS. Pada artikel kali ini kita akan belajar cara membuat Formulir Login & Pendaftaran yang responsif dan bisa di geser menggunakan HTML, CSS & Javascript, beserta pemahaman implementasinya melalui contoh.
Formulir ini sendiri terdiri dari 1 halaman yang bisa digunakan untuk login dan mendaftar, Formulir Pendaftaran digunakan untuk mendaftar atau membuat akun baru bagi pengguna baru dan formulir login digunakan untuk masuk bagi pengguna yang terdaftar.
Di sini, kita akan belajar cara menggabungkan kedua formulir ini menjadi satu halaman HTML dan formulir akan muncul sesuai pilihan pengguna.
Di bagian atas formulir, terdapat tombol untuk memilih formulir login atau pendaftaran sesuai pilihannya.
Saat pengguna berpindah satu form ke form lainnya, form akan menampilkan animasi geser yang halus.
Langkah Kerja
Berikut Langkah kerja yang digunakan untuk membuat Formulir Login & Pendaftaran Geser Responsif:
Buat folder proyek dan di dalamnya buat 3 file :
- index.html untuk menulis kode HTML
- style.css untuk menulis kode CSS
- index.js untuk menulis kode js
Selanjutnya, buat bagian header untuk menyimpan header dan title. Kemudian di bawah bagian header, buat div “container” sebagai elemen untuk menampung kode untuk login dan formulir pendaftaran dengan tombol perubahan.
<header>
<h1 class="heading">Mbah WP</h1>
<h3 class="title">Formulir Sliding Login & Pendaftaran</h3>
</header>
<!-- container div -->
<div class="container">Sekarang, buat div untuk menyimpan 2 tombol pengubah bentuk, kita buat 2 tombol di dalam div ini yaitu tombol Login & tombol Daftar, dengan class tombol.
Kemudian di atas kode div dengan class tombol, buatlah div dengan class geser yang akan berubah posisi tombol ketika seseorang mengklik tombol tersebut.
<!-- bagian tombol atas untuk memilih formulir login atau pendaftaran -->
<div class="geser"></div>
<div class="tombol">
<button class="login">Login</button>
<button class="daftar">Daftar</button>
</div>Buatlah margin-left dan margin-rigth pada tombol div “auto”. Kemudian Anda akan melihat tombol akan muncul di tengah dan menambahkan CSS ke tombol untuk menonaktifkan batas dan garis luar serta membuat class tombol menjadi fleksibel.
Ikuti kode CSS di bawah ini untuk mengimplementasikannya:
margin: 20px auto;
display: flex;
justify-content: space-around;
align-items: center;Sekarang, tambahkan warna latar belakang ke div geser dan berikan tinggi yang sama dengan div tombol dan lebarnya harus setengah dari div tombol.
Berikut kode lengkap HTML.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Mbah WP</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<header>
<h1 class="heading">Mbah WP</h1>
<h3 class="title">Formulir Sliding Login & Pendaftaran</h3>
</header>
<!-- container div -->
<div class="container">
<!-- bagian tombol atas untuk memilih formulir login atau pendaftaran -->
<div class="geser"></div>
<div class="tombol">
<button class="login">Login</button>
<button class="daftar">Daftar</button>
</div>
<!-- Bagian formulir yang berisi login dan formulir daftar -->
<div class="form-section">
<!--formulir login -->
<div class="kotak-login ">
<input type="email"
class="email ele"
placeholder="email_anda@email.com">
<input type="password"
class="password ele"
placeholder="Password">
<button class="clkbtn">Login</button>
</div>
<!--formular daftar-->
<div class="kotak-daftar ">
<input type="text"
class="name ele"
placeholder="Masukkan nama Anda ">
<input type="email"
class="email ele"
placeholder="email_anda@email.com">
<input type="password"
class="password ele"
placeholder="Password">
<input type="password"
class="password ele"
placeholder="Konfirmasi password">
<button class="clkbtn">Daftar</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Kemudian buat position absolute, kemudian tambahkan left dan top untuk menyelaraskan div dengan awal div tombol.
Itu harus menutupi bagian pertama dari div tombol. Tambahkan juga nilai transition 0,5 detik untuk melihat animasi yang halus saat penggeser akan bergerak.
Sekarang, tambahkan class tambahan dalam CSS yang akan ditambahkan nanti ketika seseorang mengklik tombol kedua, dan di dalamnya memberikan perataan ke kiri sehingga penggeser akan menutupi paruh terakhir class div tombol.
Berikut kode lengkap CSS.
@import url(
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 30px;
background-color: rgb(231, 231, 231);
}
header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.heading {
color: green;
}
.title {
font-weight: 400;
letter-spacing: 1.5px;
}
.container {
height: 600px;
width: 500px;
background-color: white;
box-shadow: 8px 8px 20px rgb(128, 128, 128);
position: relative;
overflow: hidden;
}
.tombol {
height: 60px;
width: 300px;
margin: 20px auto;
box-shadow: 10px 10px 30px rgb(254, 215, 188);
border-radius: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.login,
.daftar {
font-size: 22px;
border: none;
outline: none;
background-color: transparent;
position: relative;
cursor: pointer;
}
.geser {
height: 60px;
width: 150px;
border-radius: 50px;
background-image: linear-gradient(to right,
rgb(255, 195, 110),
rgb(255, 146, 91));
position: absolute;
top: 20px;
left: 100px;
transition: all 0.5s ease-in-out;
}
.geserslide {
left: 250px;
}
.form-section {
height: 500px;
width: 1000px;
padding: 20px 0;
display: flex;
position: relative;
transition: all 0.5s ease-in-out;
left: 0px;
}
.form-section-move {
left: -500px;
}
.kotak-login,
.kotak-daftar {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 40px;
}
.kotak-login {
gap: 50px;
}
.kotak-daftar {
gap: 30px;
}
.ele {
height: 60px;
width: 400px;
outline: none;
border: none;
color: rgb(77, 77, 77);
background-color: rgb(240, 240, 240);
border-radius: 50px;
padding-left: 30px;
font-size: 18px;
}
.clkbtn {
height: 60px;
width: 150px;
border-radius: 50px;
background-image: linear-gradient(to right,
rgb(255, 195, 110),
rgb(255, 146, 91));
font-size: 22px;
border: none;
cursor: pointer;
}
/* Untuk Membuat Halaman Agar Responsif*/
@media screen and (max-width: 650px) {
.container {
height: 600px;
width: 300px;
}
.title {
font-size: 15px;
}
.tombol {
height: 50px;
width: 200px;
margin: 20px auto;
}
.login,
.daftar {
font-size: 19px;
}
.geser {
height: 50px;
width: 100px;
left: 50px;
}
.geserslide {
left: 150px;
}
.form-section {
height: 500px;
width: 600px;
}
.form-section-move {
left: -300px;
}
.kotak-login,
.kotak-daftar {
height: 100%;
width: 300px;
}
.ele {
height: 50px;
width: 250px;
font-size: 15px;
}
.clkbtn {
height: 50px;
width: 130px;
font-size: 19px;
}
}
@media screen and (max-width: 320px) {
.container {
height: 600px;
width: 250px;
}
.heading {
font-size: 30px;
}
.title {
font-size: 10px;
}
.tombol {
height: 50px;
width: 200px;
margin: 20px auto;
}
.login,
.daftar {
font-size: 19px;
}
.geser {
height: 50px;
width: 100px;
left: 27px;
}
.geserslide {
left: 127px;
}
.form-section {
height: 500px;
width: 500px;
}
.form-section-move {
left: -250px;
}
.kotak-login,
.kotak-daftar {
height: 100%;
width: 250px;
}
.ele {
height: 50px;
width: 220px;
font-size: 15px;
}
.clkbtn {
height: 50px;
width: 130px;
font-size: 19px;
}
}Sekarang, tulis kode javascript untuk menggerakkan tombol geser sesuai pilihan pengguna. Event klik pada tombol Daftar akan dibaca melalui “addEventListener” dan tambahkan kelas yang sudah ditentukan dalam CSS pada langkah di atas. Juga,
Tambahkan event klik pada tombol Login untuk menghapus class (gunakan tag “classList.add(“class_name”)” untuk menambahkan class dan untuk menghapus class gunakan “classList.remove(“class_name”)“).
Seperti tombol Geser, kita akan membuat bentuk geser, menggunakan pendekatan yang sama. Di bawah div tombol, kita akan membuat bagian atau div lain yang berisi dua form.
Di dalam div formulir ini, kita akan membuat 2div. Satu akan berisi formulir login dan yang lainnya berisi formulir pendaftaran.
Kemudian buat bidang yang diperlukan di dalam bagian login dan pendaftaran bersama dengan login dan tombol daftar.
Buat lebar bagian login dan pendaftaran sama dengan lebar div container dan div formulir section, harus menggandakan div container.
Buatlah formulir section “display: flex; position: relatif; left: 0px;“. Dan tambahkan “overflow: hidden;” di dalam div container untuk menyembunyikan form kedua yang berada di luar container.
Sekarang tulis class tambahan dalam CSS yang akan ditambahkan nanti ketika seseorang mengklik tombol kedua dan di dalamnya memberikan perataan ke kiri sehingga formulir akan meluncur ke kiri dan formulir kedua akan terlihat.
Sekarang tulis kode dalam javascript untuk menambahkan class tambahan (sudah ditentukan dalam CSS pada langkah terakhir) di dalam formulir section ketika seseorang mengklik tombol daftar dan juga menghapusnya ketika tombol login diklik.
let daftar = document.querySelector(".daftar");
let login = document.querySelector(".login");
let geser = document.querySelector(".geser");
let formSection = document.querySelector(".form-section");
daftar.addEventListener("click", () => {
geser.classList.add("geserslide");
formSection.classList.add("form-section-move");
});
login.addEventListener("click", () => {
geser.classList.remove("geserslide");
formSection.classList.remove("form-section-move");
});Berikut ini hasil akhir dari pembuatan formulir login & pendaftaran geser responsif menggunakan HTML CSS & Javascript. Silahkan klik pada tombol login & daftar untuk melihat efek sliding pada formulir ketika mengganti formulir login & pendaftaran.
Itu dia cara membuat Formulir Login & Pendaftaran yang responsif dan bisa di geser menggunakan HTML, CSS & Javascript. Semoga tutorial ini bisa membantu Anda berlatih HTML, CSS & JavaScript untuk membuat desain yang lebih bagus.
