Cara Membuat Login Form Keren dengan HTML CSS
Untuk 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..
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="box" action="https://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.
Penutup
buat login apa ya
untuk halaman login gan/form login :)
Wah keren. Otw praktek. Heheh
sip gan, lanjutkan bakatmu
Gan, tutor bikin form komentar kek gini dong..
kalau bikin komentar seperti ini, silahkan daftar blogger.com
Mas untuk pemasangan ke halaman blog nya gimana ya?
untuk halaman blog blogger sepertinya tidak bisa.
terima kasih saya ikuti tutorialnya, cantik hasilnya
sama-sama mas
form register nya bro ada ga
Setelah form login berhasil dibuat, langkah selanjutnya untuk pemasangan ke website localhost bgmn, adakah tutorialnya ??
Asslam, setelah selessai membat form login berhasil, langkah selanjutnya untuk pemasangan ke website localhost bgmn bang ? adakah tutorialnya ?