Membuat Form Login dan Register
www.gurudzgn.com - Hi web developer!, kembali lagi bersama guru design. kali ini guru design akan membahas cara Membuat Form Login dan Registe. Membangun sebuah situs web atau aplikasi seringkali memerlukan form login dan register sebagai bagian penting. Form ini memungkinkan pengguna untuk mengakses konten terbatas atau membuat akun mereka sendiri. Dalam artikel ini, kami akan membahas cara membuat form login dan register dengan langkah-langkah yang jelas dan contoh kode yang dapat Anda gunakan. Mari kita mulai dengan menciptakan pengalaman pengguna yang lebih baik di situs web atau aplikasi Anda.
Mengapa Form Login dan Register Penting?
Form login dan register adalah komponen penting dalam pengembangan web. Mereka memungkinkan pengguna untuk:
1. Mengakses Konten Terbatas
Dengan login, pengguna dapat mengakses konten eksklusif, seperti profil pribadi, pesan pribadi, atau berkas yang terkunci.
2. Berinteraksi dengan Situs Web atau Aplikasi
Form ini memungkinkan pengguna untuk berinteraksi dengan situs web atau aplikasi Anda dengan cara yang lebih personal.
3. Mengamankan Data Pengguna
Form register membantu dalam pengumpulan informasi pengguna dan menjaga data tersebut dalam basis data yang aman.
Membuat Form Login dan Register
Langkah 1: Menyiapkan Struktur HTML
Untuk membuat form login dan register, Anda perlu menyiapkan struktur HTML dasar. Di bawah ini adalah contoh struktur HTML + JavaScript dasar untuk form login:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login and Registration Form in HTML</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login Form
</div>
<div class="title signup">
Signup Form
</div>
</div>
<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>
<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="">Signup now</a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
<script>
const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");
signupBtn.onclick = (()=>{
loginForm.style.marginLeft = "-50%";
loginText.style.marginLeft = "-50%";
});
loginBtn.onclick = (()=>{
loginForm.style.marginLeft = "0%";
loginText.style.marginLeft = "0%";
});
signupLink.onclick = (()=>{
signupBtn.click();
return false;
});
</script>
</body>
</html>Untuk form register, struktur dasarnya mirip, dengan beberapa perubahan sesuai kebutuhan.
Langkah 2: Menambahkan CSS
Tentu saja, kita ingin form kita terlihat menarik dan mudah digunakan. Untuk itu, kita bisa menggunakan CSS untuk mengatur tampilan form. Berikut adalah contoh CSS sederhana untuk form login:
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: #41a900;
}
::selection{
background: #41a900;
color: #fff;
}
.wrapper{
overflow: hidden;
max-width: 390px;
background: #fff;
padding: 30px;
border-radius: 50px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
display: flex;
width: 200%;
}
.wrapper .title{
width: 50%;
font-size: 25px;
font-weight: 600;
text-align: center;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
position: relative;
display: flex;
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0;
justify-content: space-between;
border: 1px solid lightgrey;
border-radius: 50px;
}
.slide-controls .slide{
height: 100%;
width: 100%;
color: #fff;
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 48px;
cursor: pointer;
z-index: 1;
transition: all 0.6s ease;
}
.slide-controls label.signup{
color: #000;
}
.slide-controls .slider-tab{
position: absolute;
height: 100%;
width: 50%;
left: 0;
z-index: 0;
border-radius: 50px;
background: #41a900;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
display: none;
}
#signup:checked ~ .slider-tab{
left: 50%;
}
#signup:checked ~ label.signup{
color: #fff;
cursor: default;
user-select: none;
}
#signup:checked ~ label.login{
color: #41a900;
}
#login:checked ~ label.signup{
color: #41a900;
}
#login:checked ~ label.login{
cursor: default;
user-select: none;
}
.wrapper .form-container{
width: 100%;
overflow: hidden;
}
.form-container .form-inner{
display: flex;
width: 200%;
}
.form-container .form-inner form{
width: 50%;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.form-inner form .field input{
height: 100%;
width: 100%;
outline: none;
padding-left: 15px;
border-radius: 50px;
border: 1px solid lightgrey;
border-bottom-width: 2px;
font-size: 14px;
transition: all 0.3s ease;
}
.form-inner form .field input:focus{
border-color: #41a900;
/* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
color: #999;
transition: all 0.3s ease;
}
form .field input:focus::placeholder{
color: #b3b3b3;
}
.form-inner form .pass-link{
margin-top: 5px;
}
.form-inner form .signup-link{
text-align: center;
margin-top: 30px;
font-size:14px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
color:#41a900;
text-decoration: none;
font-size:14px;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
text-decoration: underline;
}
form .btn{
height: 50px;
width: 100%;
border-radius: 50px;
position: relative;
overflow: hidden;
}
form .btn .btn-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: #41a900;
border-radius: 50px;
transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
left: 0;
}
form .btn input[type="submit"]{
height: 100%;
width: 100%;
z-index: 1;
position: relative;
background: none;
border: none;
color: #fff;
padding-left: 0;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
</style>Tambahkan kode CSS ini di dalam tag <style> pada bagian <head> di halaman HTML Anda.
Langkah 3: Menggunakan Bahasa Pemrograman
Untuk mengolah data yang dikirimkan melalui form, Anda perlu menggunakan bahasa pemrograman seperti PHP, Python, atau JavaScript. Anda bisa menyesuaikannya sendiri.
Untuk form register juga sama saja, Anda juga akan membutuhkan script yang serupa untuk memproses data yang dikirimkan oleh pengguna.
Langkah 4: Menambahkan Deskripsi Penelusuran Google
Penting untuk meningkatkan SEO situs web Anda dengan menambahkan deskripsi penelusuran Google. Deskripsi ini muncul di hasil penelusuran Google dan dapat membantu meningkatkan klik ke situs Anda. Pastikan deskripsi ini relevan dengan konten halaman Anda dan berisi kata kunci yang relevan seperti "form login dan register."
Sekian tutorial cara Membuat Form Login dan Register, semoga dapat di terapkan dengan baik. dan trimakasih atas kunjungannya.