Halaman Login terdapat pada website dinamis. Halaman ini adalah ‘pintu’ menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.
Keberadaan halaman login cukup vital mengingat kegunaan dan interaktivitasnya dengan pengguna. Tidak seperti elemen-elemen website lain, form login ini ada bukan untuk dibaca, tetapi untuk digunakan secara langsung dengan mengisi isiannya. Isian form login biasanya terdiri dari email atau username dan password.
Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.
Nah, di bawah ini saya kumpulkan 50 template halaman login gratis yang siap pakai. Silahkan anda pilih dan download yang anda sukai. Anda bebas menggunakannya pada project anda. Klik gambarnya untuk detail dan download.
Konten [Tampil]
Cara Membuat Login Form Keren dengan HTML CSS - Pada artikel ini saya akan membuat form login keren dengan HTML dan CSS. Kode script ini saya dapatkan diyoutube yang mana bisa menjadikan sumber referensi anda untuk dijadikan yang lebih bagus lagiUntuk Demonya bisa cek: Form Login
Cara Membuat Login Form Keren
Sebelum memulai membuat halaman login ini, anda perlu menyiapkan alat-alat, sebagai berikut.
- Komputer/PC. kalau tidak punya pinjam pergi ke warnet.
- Text Editor. Bebas pakai yang mana.
- Browser. Pakai Internet Explorer (Rekomendasi pakai Chrome).
- Niat. Agar belajarmu hari ini biar tidak sia-sia.
Untuk aplikasi text editornya anda bisa menggunakan Notepad, tetapi anda juga bisa memakai:
- Sublime Text
- Notepad++
- Komodo Edit
- Atom
- BlueFish
- Vim
- Emacs
- dan sebagainya..
Baca Juga: Cara Membuat Formulir Pendaftaran Sederhana
<!DOCTYPE html> <html> <head> <title>Login Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <form class="box" action="//www.ansoriweb.com/2020/01/cara-membuat-login-form-keren-dengan-html-css.html" method="post"> <h1>Login Here</h1> <input type="text" name="" placeholder="Username"> <input type="password" name="" placeholder="Password"> <input type="submit" name="" value="Login"> </form> </body> </html>
2. Kemudian buat: sebuah file CSS dan beri nama "style.css", dan masukkan script kode berikut ini:
body{ margin: 0; padding: 0; font-family: sans-serif; background: url(bg.jpg); background-repeat: no-repeat; background-size: cover; } .box{ width: 300px; padding: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #191919; text-align: center; } .box h1{ color: white; text-transform: uppercase; font-weight: 500; } .box input[type = "text"], .box input[type = "password"]{ border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type = "text"]:focus,.box input[type = "password"]:focus{ width: 280px; border-color: #2ecc71; } .box input[type = "submit"] { border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; } .box input[type = "submit"]:hover { background: #2ecc71; }
3. Lalu Save: dan tarik file "index.html" kebrowser yang kamu miliki. Perlu kamu ingat! jika ingin mengganti gambar dicss body{}. Dan jangan lupa memindahkan file gambar tersebut ke folder yang telah dibuat.
Setelah selesai mengikuti panduan diatas, maka tampilan form login seperti dibawah ini.
Baca Juga: Pengertian Activity Diagram : Tujuan, Simbol, Contoh
Penutup
Jangan Lupa Bagikan :D