Bagaimana Sih Cara Membuat Form Login Menggunakan HTML Dan Css?
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Pada kali ini saya akan memberikan Tutorial Lagi yaitu, bagimana sih cara membuat form login sederhana menggunakan HTML Dan Css
B. Latar Belakang
Latar Belakang Saya membuat Form Login ini adalah Untuk Melindungi Sistem pada aplikasi atau website yang dibuat
C. Maksud Dan Tujuan
Agar Tidak sembarang orang yang dapat masuk ke sistem atau aplikasi yang kita buat, Nah Dengan adanya form login ini dapat meminimalisir Orang yang tidak bertanggung jawab untuk masuk ke website atau aplikasi yang kita buat.
D. Jangka Waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
- Browser
- Teks Editor ( Sublime Text )
F. Langkah Kerja
Nah Hal pertama yang harus kalian lakukana adalah membuka Software teks editor kesayangan kalian, nah setelah itu buat file baru dengan cara menekan tombol kombinasi keyboard CTRL+N ( bagi pengguna Sublime ) Nah setelah itu save dan beri nama index.html
Ohya Sebelum itu, form login ini saya buat hanya menggunakan html dan css saja, Tidak ada campur aduk dengan hal lain, seperti framework atau lainnya :), Lanjutt..
Nah Setelah Itu Ketikkan Kode seperti dibawah ini ( Ketik Ya Jangan Copas :< )
Nah Setelah Itu buat file baru lagi dengan nama style.css, Setelah itu ketikkan ulang kode berikut :)
Nah Dalam Pembuatan Telah Selesai, Setelah Itu save dan buka di Browser kalian, untuk Pengguna Sublime Text dapat dilakukan dengan cara klik kanan kemudian Open In Browser, nah maka Akan Tampil Seperti Ini :
Gimana? Sangat Sederhana Bukan :)
G. Kesimpulan
Dalam Pembuatan Form login ini dubutuhkan pemahaman tentang Html dan Css
H. Referensi
-
Sekian yang dapat saya sampikan, Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Pada kali ini saya akan memberikan Tutorial Lagi yaitu, bagimana sih cara membuat form login sederhana menggunakan HTML Dan Css
B. Latar Belakang
Latar Belakang Saya membuat Form Login ini adalah Untuk Melindungi Sistem pada aplikasi atau website yang dibuat
C. Maksud Dan Tujuan
Agar Tidak sembarang orang yang dapat masuk ke sistem atau aplikasi yang kita buat, Nah Dengan adanya form login ini dapat meminimalisir Orang yang tidak bertanggung jawab untuk masuk ke website atau aplikasi yang kita buat.
D. Jangka Waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
- Browser
- Teks Editor ( Sublime Text )
F. Langkah Kerja
Nah Hal pertama yang harus kalian lakukana adalah membuka Software teks editor kesayangan kalian, nah setelah itu buat file baru dengan cara menekan tombol kombinasi keyboard CTRL+N ( bagi pengguna Sublime ) Nah setelah itu save dan beri nama index.html
Ohya Sebelum itu, form login ini saya buat hanya menggunakan html dan css saja, Tidak ada campur aduk dengan hal lain, seperti framework atau lainnya :), Lanjutt..
Nah Setelah Itu Ketikkan Kode seperti dibawah ini ( Ketik Ya Jangan Copas :< )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="" method="post">
<div class="dasar">
<div class="ats">
<h2 style="line-height: 45px;margin-left: 20px;">Form Login</h2>
</div>
<div class="username">
<div class="ico"><i style="float: left;margin-left: 5px;margin-top: 3px;" class="fa fa-user fa-2x"></div></i><input class="user" type="text" name="no_induk" placeholder="Username" required="">
</div>
<div class="usernam">
<div class="ico"><i style="float: left;margin-left:7px;margin-top: 3px;" class="fa fa-lock fa-2x style="color:white"></div></i><input class="user" name="password" style="margin-left: 8px;" type="Password" placeholder="Password" required="">
<button class="btn" name="masuk">MASUK</button>
</form>
</div>
<p style="margin-top: 70px;margin-left: 85px;color: black;font-weight: bold">Belum Punya akun? <a style="text-decoration: none;" href="../admin/registrasi_siswa.php">Klik Disini</p></a>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="" method="post">
<div class="dasar">
<div class="ats">
<h2 style="line-height: 45px;margin-left: 20px;">Form Login</h2>
</div>
<div class="username">
<div class="ico"><i style="float: left;margin-left: 5px;margin-top: 3px;" class="fa fa-user fa-2x"></div></i><input class="user" type="text" name="no_induk" placeholder="Username" required="">
</div>
<div class="usernam">
<div class="ico"><i style="float: left;margin-left:7px;margin-top: 3px;" class="fa fa-lock fa-2x style="color:white"></div></i><input class="user" name="password" style="margin-left: 8px;" type="Password" placeholder="Password" required="">
<button class="btn" name="masuk">MASUK</button>
</form>
</div>
<p style="margin-top: 70px;margin-left: 85px;color: black;font-weight: bold">Belum Punya akun? <a style="text-decoration: none;" href="../admin/registrasi_siswa.php">Klik Disini</p></a>
</div>
</div>
</body>
</html>
Nah Setelah Itu buat file baru lagi dengan nama style.css, Setelah itu ketikkan ulang kode berikut :)
* {
padding: 0;
margin: 0;
}
body {
background-color: #B4B4B4FF;
}
.dasar {
width: 380px;
height: 280px;
background:white;
margin: 150px auto;
/*opacity: 0.3;*/
background-color: white;
}
.user {
height: 36px;
width: 215px;
margin-left: 5px;
vertical-align: top;
border:1px white;
text-align: center;
outline-color: white;
margin-top: 1px;
}
.username {
width: 255px;
height: 38px;
background: white;
margin: 30px auto;
border: 1px solid black;
}
.usernam {
width: 260px;
height: 38px;
background: white;
margin: 30px auto;
margin-top: -20px;
border: 1px solid black;
}
.btn {
width: 260px;
height: 30px;
background: #416AFFFF;
border: 0;
color: white;
margin-top: 30px;
cursor: pointer;
font-weight: bold;
}
.btn:active {
transform: translateY(3px);
background-color: white;
}
.logo {
width: 100px;
height: 60px;
margin:40px auto;
}
.ats {
width: 380px;
height: 45px;
background-color: #416AFFFF;
color: white;
}
padding: 0;
margin: 0;
}
body {
background-color: #B4B4B4FF;
}
.dasar {
width: 380px;
height: 280px;
background:white;
margin: 150px auto;
/*opacity: 0.3;*/
background-color: white;
}
.user {
height: 36px;
width: 215px;
margin-left: 5px;
vertical-align: top;
border:1px white;
text-align: center;
outline-color: white;
margin-top: 1px;
}
.username {
width: 255px;
height: 38px;
background: white;
margin: 30px auto;
border: 1px solid black;
}
.usernam {
width: 260px;
height: 38px;
background: white;
margin: 30px auto;
margin-top: -20px;
border: 1px solid black;
}
.btn {
width: 260px;
height: 30px;
background: #416AFFFF;
border: 0;
color: white;
margin-top: 30px;
cursor: pointer;
font-weight: bold;
}
.btn:active {
transform: translateY(3px);
background-color: white;
}
.logo {
width: 100px;
height: 60px;
margin:40px auto;
}
.ats {
width: 380px;
height: 45px;
background-color: #416AFFFF;
color: white;
}
Nah Dalam Pembuatan Telah Selesai, Setelah Itu save dan buka di Browser kalian, untuk Pengguna Sublime Text dapat dilakukan dengan cara klik kanan kemudian Open In Browser, nah maka Akan Tampil Seperti Ini :
Gimana? Sangat Sederhana Bukan :)
G. Kesimpulan
Dalam Pembuatan Form login ini dubutuhkan pemahaman tentang Html dan Css
H. Referensi
-
Sekian yang dapat saya sampikan, Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alikum Wr.Wb
