Halo teman-teman! Dalam artikel ini, kita akan belajar bagaimana cara membuat Aplikasi Login Mobile hanya dengan HTML dan CSS. Jika kamu sedang mencari referensi untuk membuat tampilan login yang simpel dan responsif, maka tutorial ini sangat cocok untukmu.
Sebelumnya, saya juga telah membagikan tutorial tentang cara membuat form login sederhana, dan kali ini kita akan mengembangkan desainnya agar menyerupai aplikasi mobile. Jika kamu menyukai artikel ini, jangan lupa untuk subscribe rebelsec.id agar tidak ketinggalan update terbaru!
Apa Itu Form Login?
Form login adalah salah satu elemen penting dalam aplikasi berbasis web yang berfungsi untuk mengautentikasi pengguna sebelum mengakses halaman tertentu. Biasanya, form ini terdiri dari beberapa input field seperti:
- Username atau Email
- Password
- Tombol Login
Formulir HTML dibuat menggunakan tag <form>...</form>, di dalamnya terdapat berbagai elemen input yang berfungsi untuk menerima data pengguna. Formulir ini bisa berisi text field, password field, radio button, combo box, dan elemen lain sesuai kebutuhan.
Pentingnya Halaman Login
Hampir semua aplikasi yang memerlukan akses pengguna memiliki halaman login. Contoh paling umum adalah Facebook, yang meminta pengguna untuk masuk terlebih dahulu sebelum mengakses akun mereka.
Proses autentikasi dilakukan dengan cara:
- Pengguna memasukkan username/email dan password.
- Sistem akan memverifikasi data yang dimasukkan.
- Jika valid, pengguna dapat mengakses halaman yang dilindungi.
- Jika tidak valid, sistem akan menampilkan pesan error.
Desain Aplikasi Login Mobile
Berikut adalah tampilan aplikasi login mobile yang akan kita buat:
📌 Dibuat hanya dengan HTML dan CSS
📌 Desain responsif dan modern
📌 Mudah digunakan dalam proyekmu
📥 Logo PNG
Pastikan kamu sudah memiliki logo untuk tampilan login. Simpan gambar logo dengan nama logo.png di folder yang sama dengan file HTML dan CSS.
💻 Source Code: HTML & CSS
Jika kamu menyukai desain Mobile Login App ini, silakan gunakan dalam proyekmu. Salin kode berikut dan buat dua file:
✅ index.html (File HTML)
✅ style.css (File CSS)
📌 Langkah-langkahnya:
1️⃣ Buat file index.html dan tempelkan kode berikut:
<!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">
<title>Mobile App Login | By Rebelsec.id</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mobile">
<div class="top"></div>
<div class="bottom"></div>
<img src="logo.png" class="png1" alt="Logo">
<h1>Rebelsec.id</h1>
<h6>Start your online journey</h6>
</div>
<div class="mobile2">
<div class="top"></div>
<div class="bottom"></div>
<h2>< Back</h2>
<br>
<img src="logo.png" class="png2" alt="Logo">
<h3>Proceed with your Account</h3>
<h4>Login</h4>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password">
<input type="submit" value="Login">
</form>
</div>
</body></html>2️⃣ Buat file style.css dan tempelkan kode berikut:
body {
background: gray;
margin: 65px 0 0 300px;
font-family: monospace;
display: flex;
}
.mobile {
position: relative;
width: 320px;
height: 500px;
background: red;
}
.top {
position: absolute;
top: -50px;
width: 100%;
height: 50px;
background: #efefef;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
.top:before {
content: "";
position: absolute;
top: 50%;
left: 35%;
transform: translateY(-50%);
width: 5px;
height: 5px;
background: #ccc;
border: 2px solid #aaa;
border-radius: 50%;
box-shadow: 0 0 0 1px #999;
}
.top:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 3px;
background: #333;
border: 2px solid #aaa;
border-radius: 3px;
box-shadow: 0 0 0 1px #999;
}
.bottom {
position: absolute;
bottom: -50px;
width: 100%;
height: 50px;
background: #efefef;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.bottom:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
border: 2px solid #999;
border-radius: 30px;
}
.png1 {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 50% 0 0 30%;
background-color: white;
}
h1 {
color: white;
font-size: 40px;
padding-top: 10px;
text-align: center;
}
h6 {
color: white;
font-size: 10px;
text-align: center;
}
.mobile2 {
position: relative;
width: 320px;
height: 500px;
background: white;
margin-left: 50px;
}
h2 {
margin-left: 10px;
color: #6f7180;
}
h3 {
margin-top: 10px;
color: #6f7180;
text-align: center;
}
.png2 {
width: 100px;
height: 100px;
border-radius: 50%;
margin-left: 35%;
background-color: white;
}
h4 {
font-size: 28px;
text-align: center;
font-weight: bold;
}
form {
margin: 10px 0 0 10%;
}
label {
display: flex;
margin: 10px 0;
}
input {
width: 80%;
border: none;
outline: none;
padding: 10px;
font-size: 15px;
border-bottom: 1px solid black;
}
input[type="submit"] {
width: 252px;
color: white;
border: none;
background: red;
padding: 10px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
}
input[type="submit"]:hover {
background: darkred;
}
🎯 Kesimpulan
Kita telah berhasil membuat Aplikasi Login Mobile menggunakan HTML dan CSS. Dengan desain yang responsif dan modern, kamu bisa menggunakannya di berbagai proyek.
Posting Komentar