Form login sering kali kita temui baik dari website, aplikasi ,media sosial bahkan pendaftaran KTP awoakwok. Biasanya didalam form login berisi tentang nama, password, email, dan No HP. Okee, selamat siang, malam, sore, pagi, subuh dan sebagainya. Kali ini saya akan membagikan kalian bagaimana sih cara membuat form login yang sederhana tetapi menarik.
Pada artikel ini, kalian akan mengetahui cara membuat form login dengan HTML CSS dan Javascript. Di Form login ini saya sedikit memakai Javascript untuk membuat passwordnya menjadi intraktif. Biasanya jika kalian mengisi password pasti tulisan yang kalian masukan tidak akan terlihat. Nah disini saya menambahkan sebuah toggle show hide password yang dimana kalian bisa melihat password dengan mengklik ikon mata. Kalian hanya butuh HTML untuk membuat kerangkanya yahh terus dibalut sama CSS untuk mendesain tampilannya agak jadi bagus lah
Sudah tidak sabar untuk mengetahui cara membuat form login dengan HTML dan CSS dan Javascript? Ayok lah ke penjelasan berikut ini. Sebelum itu, kalian bisa lihat dulu contoh form nya dibawah. Gimana? Bagus kan mwehehe, terima kasih jadii malu saya.
Kode html :
<!DOCTYPE html>
<!-- Coding by Sicoding Turu | https://sicodingturu.blogspot.com/?m=1 -->
<html lang="en">
<head>
<title> Login Form show hide password</title> <!-- ini title -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700;800;900&display=swap" rel="stylesheet"> <!-- link font -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="ShowPassword.css"> <!-- link css -->
</head>
<body>
<div class="form-container">
<form>
<h3> Masuk </h3>
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter email or phone">
<label for="password">Password</label>
<div class="pass">
<input type="password" class="pass" name="password" placeholder="Enter assword" id="password">
<i id="show-hide" class="fa-solid fa-eye-slash"></i>
</div>
<button type="submit">Log In</button>
<a href="#" class="forgot">Lupa kata sandi?</a>
<hr>
<div class="social-container">
<h4> atau masuk dengan </h4>
<div class="social">
<div><a class="go" href="#"><i class="fab fa-google"></i> Google </a></div>
<div><a class="fb" href="#"><i class="fab fa-facebook"></i> Facebook</a></div>
</div>
</div>
</form>
</div>
</body>
<script src="ShowPassword.js"></script>
</html>
Kode CSS :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
body {
background-color: #007aff;
}
.form-container {
width: 100%;
display: flex;
padding: 50px 20px;
justify-items: center;
}
form {
display: block;
margin: auto;
width: 400px;
background-color: white;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
padding: 50px 35px;
}
form h3 {
font-size: 30px;
text-align: center;
color: #000000;
font-weight: 600;
line-height: 20px;
}
form h3::before{
content: '';
position: absolute;
background: red;
width: 100px;
height: 3px;
top: 80px;
}
label {
display: block;
margin-top: 2rem;
font-size: 1rem;
}
input {
outline: none;
border: 2px solid grey;
width: 100%;
border-radius: 4px;
background-color: white;
padding: 15px 10px;
margin-top: 8px;
font-weight: 500;
transition: all .2s ease;
}
input:hover{
border-color: #1235bd;
}
input::placeholder {
color: #333;
font-weight: 300;
}
.pass {
position: relative;
}
.pass i {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
right: 20px;
}
#show-hide {
font-size: 1rem;
}
button {
margin-top: 30px;
width: 100%;
background-color: #007aff;
padding: 12px 0;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
transition: all 0.1s;
color: white;
margin-bottom: 15px;
}
button:hover {
transform: translate(-0.25rem, -0.25rem);
box-shadow: 0.25rem 0.25rem #2a2a2c;
}
.forgot{
text-align: center;
color: #007aff;
font-weight: 400;
text-decoration: none;
font-size: 15px;
}
hr {
margin-top: 20px;
height: 1px;
background-color: #ffffff7f;
border: none;
outline: navajowhite;
}
.social-container h4 {
margin-top: 20px;
margin-bottom: 20px;
font-weight: 300;
font-size: 15px;
text-align: center;
color: #555;
}
.social-container h4::before{
content: '';
position: absolute;
width: 70px;
height: 2px;
background: #eaeaea;
bottom: 195px;
left: 40px;
}
.social-container h4::after{
content: '';
position: absolute;
width: 70px;
height: 2px;
background: #eaeaea;
bottom: 195px;
right: 40px;
}
.social {
display: flex;
justify-content: center;
width: 100%;
flex-direction: column;
gap: 20px;
}
.social div {
width: 100%;
border-radius: 8px;
padding: 12px 5px;
background-color: #db4437;
text-align: center;
margin: 0;
cursor: pointer;
transition: all .3s ease;
}
.social div:nth-child(2){
background-color: #3b5998;
}
.social div:hover {
transform: translateY(-5px);
}
.social a {
text-decoration: none;
}
.go {
color: white;
}
.fb {
color: white;
}
.social i {
margin-right: 4px;
}
@media screen and (max-width: 462px) {
form {
width: 100%;
}
}
Kode Javascript :
const showHide = document.getElementById('show-hide');
let passwordInput = document.getElementById('password');
showHide.addEventListener('click', function () {
showHide.classList.toggle('show');
if (showHide.classList.contains('show')) {
showHide.classList.remove('fa-eye-slash');
showHide.classList.add('fa-eye');
passwordInput.setAttribute('type', 'text');
}
else {
showHide.classList.add('fa-eye-slash');
showHide.classList.remove('fa-eye');
passwordInput.setAttribute('type', 'password');
}
});
Hasil Codingnya :
Gimana hasilnya gak ada yang error kan ? dengan kalian mencopy paste atau mendownload kode, kalian sudah mempunyai satu form login dengan tampilan lumayan keren. Jika kalian ingin mengubah silahkan gimana selera kalian aja.
Sedikit hal yang ingin saya beritahu ke kalian. Tolong kasih saran kepada saya, kenapa ketika saya ingin mengindex kan blog saya ke Google Search Console tidak berhasil ke index atau gagal terus dalam pengindex an. Jika kalian punya solusi bagaimana cara ngatasinya bisa beritahu saya, akan saya terbantu jika kalian mau memberi solusi.
Seperti biasa saya sudah menyiapkan file downloadnya, semoga bermanfaat terima kasih.
Kunjungi projects lainnya disini LIST PROJECT
Hubungi saya Contact
Sitemap Sitemap
Tentang saya About me
EmoticonEmoticon