Cara Membuat Form Login sederhana HTML + CSS
cara membuat form login sangat sederhana menggunakan html dan css
by
muzadidil
Beberapa hal yang harus di Persiapkan untuk Membuat Form Login yang Sederhana dengan HTML dan CSS
Buat Folder untuk Menyimpan File
Siapkan text editor
Untuk pengguna windows di sarankan menggunakan notepad++
Untuk pengguna android di sarankan menggunakan anWriter
Salin kode di bawah ini kemudian simpan dengan format NAMAKAMU.HTML (hanya contoh)
SCRIPT HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<form action="index.html" class="login-form">
<h1>Login</h1>
<div class="txtb">
<input type="text">
<span data-placeholder="Username"></span>
</div>
<div class="txtb">
<input type="password">
<span data-placeholder="Password"></span>
</div>
<input type="submit" class="logbtn" value="Login">
<div class="bottom-text">
Don't have account? <a href="#">Sign up</a>
</div>
</form>
<script type="text/javascript">
$(".txtb input").on("focus",function(){
$(this).addClass("focus");
});
$(".txtb input").on("blur",function(){
if($(this).val() == "")
$(this).removeClass("focus");
});
</script>
</body>
</html>
Salin kode di bawah ini kemudian simpan dengan format CSS, Format penyimpanan harus sama yaitu style.css
SCRIPT CSS
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: montserrat;
box-sizing: border-box;
}
body{
min-height: 100vh;
background-image: linear-gradient(120deg,#3498db,#8e44ad);
}
.login-form{
width: 360px;
background: #f1f1f1;
height: 580px;
padding: 80px 40px;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.login-form h1{
text-align: center;
margin-bottom: 60px;
}
.txtb{
border-bottom: 2px solid #adadad;
position: relative;
margin: 30px 0;
}
.txtb input{
font-size: 15px;
color: #333;
border: none;
width: 100%;
outline: none;
background: none;
padding: 0 5px;
height: 40px;
}
.txtb span::before{
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
}
.txtb span::after{
content: '';
position: absolute;
width: 0%;
height: 2px;
background: linear-gradient(120deg,#3498db,#8e44ad);
transition: .5s;
}
.focus + span::before{
top: -5px;
}
.focus + span::after{
width: 100%;
}
.logbtn{
display: block;
width: 100%;
height: 50px;
border: none;
background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
background-size: 200%;
color: #fff;
outline: none;
cursor: pointer;
transition: .5s;
}
.logbtn:hover{
background-position: right;
}
.bottom-text{
margin-top: 60px;
text-align: center;
font-size: 13px;
}
Pastikan semua file diatas di simpan di folder yang sudah di buat tadi, file html dan css jangan di buat terpisah.
PENUTUP
Finishing dan uji Coba untuk Windows
- Cek kembali kode yang kalian simpan pastikan sudah benar
- Buka Folder tempat kalian menyimpan file sebelumnya
- klik 2x pada file HTML-nya
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
Finishing dan uji Coba untuk Pengguna ANDROID
- Buka aplikasi anWriternya
- Buka file htmlnya di menu pojok kiri (burger button)
- kemdian tekan preview
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar