Form Login dan Registrasi dalam HTML CSS dan JavaScript

Halo teman saya harap Anda melakukan suatu hal yang luar biasa. Hari ini disini kita akan belajar membuat Responsive Login and Registration Form di HTML CSS dan JavaScript. Seperti yang anda ketahui sudah banyak sekali Form Template yang telah saya buat sampai saat ini. Namun proyek ini memiliki beberapa fasilitas dan fitur.

Formulir login adalah bagian pada halaman web di mana pengguna harus mengisi detail yang diperlukan untuk memasuki situs web atau halaman web tertentu. Sama seperti formulir Pendaftaran adalah bagian dengan kombinasi bidang input di mana pengguna harus mengisi detail untuk membuat id dan kata sandi masuk.

Mari kita lihat sekilas gambar proyek kita [Login and Registration Form]. Di sisi kiri, kita bisa melihat form login dengan beberapa field input, tombol, s, dan teks dengan link, begitu pula di sisi kanan, kita bisa melihat formulir pendaftaran. Sebenarnya pada awalnya akan ada satu form yaitu form login dan ketika kita mengklik tombol signup now form login akan hilang dan akan muncul form registrasi.

Sekarang kita akan melihat demo sebenarnya dari proyek ini [Login and Registration Form], dan semua animasi yang telah saya sertakan dalam template ini. Juga dengan menonton video tutorial, kita akan mendapatkan ide, bagaimana semua kode HTML CSS dan JavaScript bekerja dengan baik di balik desain formulir yang indah ini.

Saya telah menyediakan semua kode HTML CSS dan JavaScript yang saya gunakan untuk membuat Formulir Login dan Pendaftaran yang indah ini, sebelum Melompat ke file kode sumber, Anda perlu mengetahui beberapa poin penting dari tutorial video ini.

Seperti yang telah Anda lihat pada video tutorial Form Login dan Registrasi ini. Kami hanya melihat pada formulir login di layar dengan judul login beberapa input diajukan dengan animasi fokus yang indah dan sebuah tombol dan beberapa teks dan link nav dan juga kami telah melihat kata sandi menyembunyikan dan menampilkan tombol sakelar mata. Ketika saya mengklik tombol signup sekarang link sign-up menghilang dan formulir pendaftaran muncul dengan animasi geser yang indah.

Demikian pula pada formulir pendaftaran, kita telah melihat judul, bidang input, tombol, dan beberapa teks dengan tautan nav. Sekali lagi ketika saya mengklik tautan Masuk sekarang, formulir pendaftaran hilang dan formulir masuk muncul.

Untuk desain UI saya hanya menggunakan HTM dan CSS dan untuk mengaktifkan fitur Login and Registration Form dan Password Show Hide saya telah menggunakan Beberapa kode JavaScript. Jika Anda menginginkan Formulir Login dan Registrasi jenis ini di HTM dan CSS Only maka Anda dapat mengklik tautannya.

Saya percaya, sekarang Anda dapat dengan mudah membuat form login ini, jika Anda merasa kesulitan, saya telah menyediakan semua HTML CSS, dan kode JavaScript yang telah saya gunakan untuk membuat Form Login dan Registrasi ini di bawah ini:

Formulir Login dan Registrasi [Kode Sumber]

Untuk mengambil source code dari Login and Registration Form Template ini terlebih dahulu, Anda perlu membuat dua file: file HTML dan file CSS. Setelah membuat kedua file tersebut maka anda bisa copy-paste source code berikut. Anda juga dapat langsung mengunduh semua kode sumber Formulir Masuk dan Pendaftaran ini dengan mengklik tombol unduh yang diberikan.

HTML CODE:

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">  <link rel="stylesheet" href="style.css"> <title>Login & Registration Form</title> </head> <body> <div class="container"> <div class="forms"> <div class="form login"> <span class="title">Login</span> <form action="#"> <div class="input-field"> <input type="text" placeholder="Enter your email" required> <i class="uil uil-envelope icon"></i> </div> <div class="input-field"> <input type="password" class="password" placeholder="Enter your password" required> <i class="uil uil-lock icon"></i> <i class="uil uil-eye-slash showHidePw"></i> </div> <div class="checkbox-text"> <div class="checkbox-content"> <input type="checkbox" id="logCheck"> <label for="logCheck" class="text">Remember me</label> </div> <a href="#" class="text">Forgot password?</a> </div> <div class="input-field button"> <input type="button" value="Login Now"> </div> </form> <div class="login-signup"> <span class="text">Not a member? <a href="#" class="text signup-link">Signup now</a> </span> </div> </div>  <div class="form signup"> <span class="title">Registration</span> <form action="#"> <div class="input-field"> <input type="text" placeholder="Enter your name" required> <i class="uil uil-user"></i> </div> <div class="input-field"> <input type="text" placeholder="Enter your email" required> <i class="uil uil-envelope icon"></i> </div> <div class="input-field"> <input type="password" class="password" placeholder="Create a password" required> <i class="uil uil-lock icon"></i> </div> <div class="input-field"> <input type="password" class="password" placeholder="Confirm a password" required> <i class="uil uil-lock icon"></i> <i class="uil uil-eye-slash showHidePw"></i> </div> <div class="checkbox-text"> <div class="checkbox-content"> <input type="checkbox" id="sigCheck"> <label for="sigCheck" class="text">Remember me</label> </div> <a href="#" class="text">Forgot password?</a> </div> <div class="input-field button"> <input type="button" value="Login Now"> </div> </form> <div class="login-signup"> <span class="text">Not a member? <a href="#" class="text login-link">Signup now</a> </span> </div> </div> </div> </div> <script> const container = document.querySelector(".container"), pwShowHide = document.querySelectorAll(".showHidePw"), pwFields = document.querySelectorAll(".password"), signUp = document.querySelector(".signup-link"), login = document.querySelector(".login-link"); // js code to show/hide password and change icon pwShowHide.forEach(eyeIcon =>{ eyeIcon.addEventListener("click", ()=>{ pwFields.forEach(pwField =>{ if(pwField.type ==="password"){ pwField.type = "text"; pwShowHide.forEach(icon =>{ icon.classList.replace("uil-eye-slash", "uil-eye"); }) }else{ pwField.type = "password"; pwShowHide.forEach(icon =>{ icon.classList.replace("uil-eye", "uil-eye-slash"); }) } }) }) }) // js code to appear signup and login form signUp.addEventListener("click", ( )=>{ container.classList.add("active"); }); login.addEventListener("click", ( )=>{ container.classList.remove("active"); }); </script>  <script type="text/javascript"> // <![CDATA[ <-- For SVG support if ('WebSocket' in window) { (function () { function refreshCSS() { var sheets = [].slice.call(document.getElementsByTagName("link")); var head = document.getElementsByTagName("head")[0]; for (var i = 0; i < sheets.length; ++i) { var elem = sheets[i]; var parent = elem.parentElement || head; parent.removeChild(elem); var rel = elem.rel; if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") { var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, ''); elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf()); } parent.appendChild(elem); } } var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; var address = protocol + window.location.host + window.location.pathname + '/ws'; var socket = new WebSocket(address); socket.onmessage = function (msg) { if (msg.data == 'reload') window.location.reload(); else if (msg.data == 'refreshcss') refreshCSS(); }; if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) { console.log('Live reload enabled.'); sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true); } })(); } else { console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.'); } // ]]> </script></body> </html>

CSS CODE:

/* ===== Google Font Import - Poformsins ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #4070f4; } .container{ position: relative; max-width: 430px; width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 0 20px; } .container .forms{ display: flex; align-items: center; height: 440px; width: 200%; transition: height 0.2s ease; } .container .form{ width: 50%; padding: 30px; background-color: #fff; transition: margin-left 0.18s ease; } .container.active .login{ margin-left: -50%; opacity: 0; transition: margin-left 0.18s ease, opacity 0.15s ease; } .container .signup{ opacity: 0; transition: opacity 0.09s ease; } .container.active .signup{ opacity: 1; transition: opacity 0.2s ease; } .container.active .forms{ height: 600px; } .container .form .title{ position: relative; font-size: 27px; font-weight: 600; } .form .title::before{ content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 30px; background-color: #4070f4; border-radius: 25px; } .form .input-field{ position: relative; height: 50px; width: 100%; margin-top: 30px; } .input-field input{ position: absolute; height: 100%; width: 100%; padding: 0 35px; border: none; outline: none; font-size: 16px; border-bottom: 2px solid #ccc; border-top: 2px solid transparent; transition: all 0.2s ease; } .input-field input:is(:focus, :valid){ border-bottom-color: #4070f4; } .input-field i{ position: absolute; top: 50%; transform: translateY(-50%); color: #999; font-size: 23px; transition: all 0.2s ease; } .input-field input:is(:focus, :valid) ~ i{ color: #4070f4; } .input-field i.icon{ left: 0; } .input-field i.showHidePw{ right: 0; cursor: pointer; padding: 10px; } .form .checkbox-text{ display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .checkbox-text .checkbox-content{ display: flex; align-items: center; } .checkbox-content input{ margin: 0 8px -2px 4px; accent-color: #4070f4; } .form .text{ color: #333; font-size: 14px; } .form a.text{ color: #4070f4; text-decoration: none; } .form a:hover{ text-decoration: underline; } .form .button{ margin-top: 35px; } .form .button input{ border: none; color: #fff; font-size: 17px; font-weight: 500; letter-spacing: 1px; border-radius: 6px; background-color: #4070f4; cursor: pointer; transition: all 0.3s ease; } .button input:hover{ background-color: #265df2; } .form .login-signup{ margin-top: 30px; text-align: center; }

Form Login dan Registrasi dalam HTML CSS dan JavaScript

Formulir Login dan Registrasi [Kode Sumber]

0 Response to "Form Login dan Registrasi dalam HTML CSS dan JavaScript"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel