Membuat Template Form Login Menggunakan HTML dan CSS
Membuat Template Form Login Menggunakan HTML dan CSS
Form login merupakan sebuah form yang sangat dibutuhkan dalam sebuah website, form login ini berufungsi untuk pintu akses kepada user yang ingin mengakses sebuah halaman, misalnya halaman administrator, makan diperlukan halaman login, karena jika tidak mempunyai halaman login maka akan mudah dalam pembajakan website tersebut.
Akan tetapi sebuah halaman login haruslah memeliki tampilan yang bagus dan menarik agar user tidak merasa bosan untuk mengelola website tersebut. Dan pada pembahasan kali ini kita akan membahas mengenai pembuatan tempalte form login yang bagus menggunakan HTML dan CSS.
Baiklah langsung saja ke pembahasan, sebelum kita membuat form login, silahakan terlebih dahulu buka aplikasi text editor(notepad++ atau sublime) kalian. Jika belum menginstalnya silahkan instal terlebih dahulu. Setelah kalain buka aplikasi text editor kalian buatlah sebuah file html dengan nama index.html. dan masukkan coding dibawah ini.
<html>
<head>
<title>PortalCoding.Com</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.img-carousel {
position: absolute;
width: 650px;
height: 290px;
}
</style>
</head>
<body bgcolor="#ffffff">
<div class="form_login">
<div class="">
<p class="txtHeadingLogin"><b>S</b>elamat <b>D</b>atang</p>
<form class="coverLogin">
<div><input type="text" class="txtUser" placeholder=" Username" /> </div>
<div><input type="text" class="txtPass" placeholder=" Password" /> </div>
<div><input type="submit" class="btnLogin" value="Login" /> </div>
<div><img src="ic_launcher.png" class="coverLogo"> </div>
<div> </div>
</form>
<p class="Copyright" >Copyright © 2018. All Rights Reserved.</p>
<div class=""></div>
<div class=""></div>
</div>
</div>
</body>
</html>
Setelah itu silahkan buat file cssnya dengan nama style.css kemudian masukkan codingnya seperti dibawah ini.
.form_login {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: auto;
z-index: 8;
}
.txtHeadingLogin {
font-size: 40px;
font-family: "Myanmar Text";
color: #ffffff;
line-height: 1.2;
text-align: left;
-moz-transform: matrix( 1.35198807484582,0,0,2.10395013897077,0,0);
-webkit-transform: matrix( 1.35198807484582,0,0,2.10395013897077,0,0);
-ms-transform: matrix( 1.35198807484582,0,0,2.10395013897077,0,0);
position: absolute;
left: 540px;
top: 100px;
z-index: 7;
}
.txtUser {
border-radius: 10px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 322px;
padding:8px;
top: 160px;
width: 231px;
height: 40px;
z-index: 6;
}
.txtPass {
border-radius: 10px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 322px;
top: 220px;
padding:8px;
width: 231px;
height: 40px;
z-index: 5;
}
.coverLogo {
border-radius: 50%;
background-color: rgb(255, 255, 255);
position: absolute;
left: 35px;
top: 130px;
width: 220px;
height: 220px;
z-index: 4;
}
.btnLogin {
border-radius: 10px;
border:0;
background-color: rgb(0, 114, 188);
position: absolute;
display:inline-block;
border-color:rgb(0, 114, 188);
left: 322px;
top: 315px;
width: 231px;
height: 40px;
z-index: 3;
}
.coverLogin {
border-radius: 15px;
background-color: rgb(0, 174, 239);
position: absolute;
left: 352px;
top: 80px;
width: 657px;
height: 440px;
z-index: 2;
}
.back {
font-size: 12px;
font-family: "Arial";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
left: 397px;
top: 576.674px;
z-index: 9;
}
.Copyright {
font-size: 12px;
font-family: "Arial";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: right;
position: absolute;
right: 393px;
top: 478.674px;
z-index: 8;
}
Setelah semuanya kalian masukkan, jangan lupa disave dan dijalankan di browser kalian. Berikut ini adalah tampilan hasil dari coding diatas.
Sekian dulu untuk pembahasan kali ini, silahkan di pelajari dan dipraktekkan. Bila ada yang kurang paham bisa bertanya melalui komentar. Jangan lupa shere artikel ini agar lebih bermanfaat. Terima kasih.
0 Response to "Membuat Template Form Login Menggunakan HTML dan CSS"
Post a Comment