 |
| Membuat form login menggunakan html dan css |
pada kesempatan kali ini saya akan membuat tutorial cara membuat form login menggunakan HTML dan CSS, form login yang bakalan kita buat cukup sederhana tapi tetap terlihat mengesankan. m
Kamu juga bisa membuat form login sendiri menggunalan html dan css saja, tetapi sebelum itu kamu harus mempelajari tentang HTML dan CSS kamu bisa mempelajari di blog GalaxyXploiter.
Disana kamu bisa mempelajar tentang HTML, CSS, Javascrypt dan lain sebagainya.
Fungsi Form Login adalah Untuk Melindungi Sistem pada aplikasi atau website tertentu lebih jelasnya begini, dengan adanya form login ini tidak semua orang yang dapat masuk ke sistem atau aplikasi yang kita buat hanya orang tertentu saja yang mengetahui username dan password 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. Oke langsung saja ke turialnya sebagai berikut:
Cara Membuat Form Login Menggunakan HTML Dan CSS
1. Pertama silahkan kamu masuk ke hosting kamu dan buat folder baru dengan nama sembarang yang kamu suka, tapi umumnya biasanya nama foldernya /admin atau /login
2. Silahkan kamu masuk ke text editor kalian lalu copy => paste code di bawah ini dan simpan dengan nama index.html
<!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="username">
<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>
3. Lalu kalian copy => paste lagi scrypt di bawah dan save dengan nama style.css
* {
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;
}
5. Silahkan kamu upload 2 file yang baru kamu buat di folder yang sudah kamu bikin tadi
6. Silahkan langsung akses saja site/namafolder
Sekian artikel kali ini tentang cara membuat form login menggunakan html dan css.
Oiya untuk kalian yang ingin belajar pemerograman bisa belajar di
blog.galaxyxploiter.my.id disana banyak tutorial lainnya juga kamu bisa belajar banyak hal disana. Oke terimakasih semoga bermanfaat.
Belum ada Komentar untuk "Cara Membuat Form Login Menggunakan HTML Dan CSS"
Posting Komentar