Ada beberapa pengunjung bertanya bagaimana untuk Membuat halaman login dengan menggunakan HTML, CSS supaya menarik? Jawabannya sekarang sudah bisa kalian praktekan yak.
Kenapa kita membuat halaman login?
Pernahkah kalian mengunjungi sebuah website baik itu website informasi atau website jejaring sosial? Pernahkah kalian bertanya bagaiman sebuah website yang kita kunjungi begitu unik di mata kita, ada tulisan warna warni, gambar, musik dan video, apakah tidak terlintas di benak kamu bagaimana mereka ada dan terpampang di website? Mereka yang sudah saya sebutkan di atas melalui beberapa tahapan, yang pertama kita bicarakan gambar misalnya, bagaimana gambar itu ada di internet? Pertama - tama gambar diambil dengan menggunakan kamera, setelah gambar itu dinyatakan bagus oleh photographer maka gambar tersebut akan dipindahkan ke media penyimpanan komputer kemudian melakukan sedikit editing seperti mengatur kecerahan warna, atau mengkomress ukuran besar filenya. Setelah gambar tersebut dirasa sudah layak dipublikasikan maka seorang photographer membuka sebuah website atau situs dimana photo tersebut dapat dilihat oleh orang banyak dan bahkan gambarnya dapat dijual. Untuk dapat memamerkan atau menjual photonya si photographer ini harus login untuk dapat melakukan penyimpanan gambar dari komputer ke media penyimpanan internet (upload).
Apa saja yang diperlukan untuk login?
Setiap orang yang dapat melakukan login adalah orang yang pernah atu secara khusus mendaftarkan diri pda sebuah website atau situs secara pribadi atau didaftarkan karena keanggotaannya. Adapun untuk dapat melakukan login orang tersebut harus memiliki sejumlah data yang nantinya disesuaikan dengan formulir loginnya. Biasanya untuk login hanya diperlukan sebuah nama dan kata sandi, atau email dengan kata sandi dan atau sebuah kode unik yang didesign khusus oleh pemilik websitenya.
Bagaimana cara membuat halaman login?
Untuk dapat membuat halaman login ada beberapa keterampilan yang dibutuhkan, salah satunya adalah penguasaan bahasa penanda seperti HTML (HyperText Markup Language) dan CSS (Cascading Style Sheet) atau bahkan anda membutuhkan keterampilan dalam penggunaan javascript. Untuk mempermudah saya kali ini membuat simple atau sederhana login form yang dapat diutak - atik oleh kalian semua.
Berikut kodenya:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>.:: Login Form ::.</title>
<link rel="stylesheet" href="../../assets/bts/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<style>
body, html{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.9)),url(../../assets/img/bg.jpg);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
height:100%;
}
.wrap{
background-color: #333;
border:1px solid #333;
}
.login{
width:40%;
top:50%;
left:50%;
position: absolute;
transform:translate(-50%,-50%);
border-radius:4px;
padding:5px;
background-color:#3CB371;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 100px;
transform: translate(-50%, -50%);
left:50%;
top:50%;
position: relative;
}
.mn{
font-size: 2em;
}
img{
width:90%;
box-sizing: border-box;
}
@media only screen and (max-width: 600px){
.login{
width:90%;
top:50%;
left:50%;
position: absolute;
transform:translate(-50%,-50%);
border-radius:4px;
padding:5px;
background-color:#3CB371;
}
}
</style>
<div class="wrap">
<div class="login">
<img src="../../assets/img/logo.png" class="avatar" alt="Avatar">
<p class="text-center mn">Login</p>
<form method="post">
<div class="form-group">
</div>
<div class="form-group">
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required>
</div>
<div class="form-group">
<input type="password" name="ps" id="ps" placeholder="Password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="login" id="login" class="btn btn-primary btn-block" value="Login">
<input type="reset" name="rest" id="reset" class="btn btn-danger btn-block">
</div>
</form>
</div>
</div>
</div>
</body>
<script src="../../assets/jquery/jquery-3.5.1.min.js"></script>
<script src="../../assets/bts/bootstrap.min.js"></script>
</html>
Kode - kode di atas merupakan pembuatan form login yang ada pada gambar di atas.
Karena waktunya mepet ke jumatan jadi artikenya segini dulu ya, lain kali kita sambung lagi.
Comments
Post a Comment