Oke kawan , kali ini saya akan berbagi tutorial bagaimana cara kita membuat sebuah form login sederhana menggunakan html & css , oke langsugn saja.
step 1
pertama buka dulu editor kesayang anda , bisa notepad++ , sublime-text 2 , dreamweaer atau apalah , jika sudah terbuka kemudian buat dokumen baru , dan simpan , simpan dimana saja , tetapi saya sarankan buat dulu folder latihan_login agar ini menjadi referensi untuk anda membuat tampilan login administrator untuk website anda kelak ,nah kemudian beri nama index.html
Jika sudah kemudian copy dan paste code di bawah ini ,
<!DOCTYPE html><html>
<head>
<title>Login adminstrator</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div class="wrap">
<div class="head">
Login administartor
</div>
<div class="form">
<form name="fform" action="" method="post">
Username : <br/>
<input type="text" name="username"/>
<br/>
Password : <br/>
<input type="password" name="password"/>
<br/>
<input type="submit" value="login" name="button"/>
</form>
</div>
<div class="footer">
copyright © design by aji'hidayatulloh
</div>
</div>
</body>
</html>
jika sudah kemudian simpan kembali , oke kita sudah membuat file index.html , nah jika anda buka file tersebut ,tetapi ingat duluini belum ada file css nya ya , maka tampilannya akan menjadi seperti ini :
/* login.css */
html{
background: #272822;
color:#fff;
font-family: trado;
}
body{
width: 350px;
height: auto;
margin:auto;
}
.wrap{
width:350px;
height: auto;
float:left;
background: #F9F9F9;
margin-top:150px;
border-radius:5px;
box-shadow: 0px 0px 5px #000;
border:1px solid #DBDCD6;
}
.wrap .head{
width:330px;
height: auto;
padding: 10px;
font-size: 19px;
color:#333;
float: left;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #DBDCD6;
}
.wrap .form{
width:330px;
height: auto;
padding:20px 10px;
float: left;
text-align: center;
}
.wrap .form form{
margin:0;
color:#555;
font-weight: bold;
}
.wrap .form input[type="text"],.wrap .form input[type="password"]{
width: 300px;
height: auto;
padding:10px;
border:1px solid #ccc;
text-align: center;
background: #fff;
box-shadow:inset 0px 3px 5px #CBCCC4;
border-radius:5px;
}
.wrap .form input[type="text"]:focus,.wrap .form input[type="password"]:focus{
width: 300px;
height: auto;
padding:10px;
border:1px solid #BCBCBC;
text-align: center;
outline: none;
box-shadow:inset 0px 3px 5px #999C8B;
background: #fff;
}
.wrap .form input[type="submit"]{
background: -webkit-linear-gradient(top ,#EAEBE7 0%,#D5D6CF 100%);
background: -moz-linear-gradient(center top ,#EAEBE7 0%,#D5D6CF 100%);
border:1px solid #BFC1B7;
padding:5px 10px;
border-radius: 3px;
color:#5B5E51;
font-weight: bold;
margin-top: 5px;
}
.wrap .form input[type="submit"]:hover{
color:#333;
cursor: pointer;
box-shadow: 0px 0px 7px #AAE8F4;
}
.wrap .footer{
width:330px;
height: auto;
padding:8px 10px;
font-size: 11px;
color:#333;
float: left;
background: #EFF0EC;
text-align: center;
border-top: 1px solid #fff;
}
nah jika sudah anda copy dan paste code di atas , kemudian simpan di dalam folder css tadi kemudian ganti namanya menjadi login.css , nah maka form atau tampilan dari form login kita sudah selesai , form login ini bisa anda gunakan untuk login administrator di website yang anda buat besok .
step 1
pertama buka dulu editor kesayang anda , bisa notepad++ , sublime-text 2 , dreamweaer atau apalah , jika sudah terbuka kemudian buat dokumen baru , dan simpan , simpan dimana saja , tetapi saya sarankan buat dulu folder latihan_login agar ini menjadi referensi untuk anda membuat tampilan login administrator untuk website anda kelak ,nah kemudian beri nama index.html
Jika sudah kemudian copy dan paste code di bawah ini ,
<!DOCTYPE html><html>
<head>
<title>Login adminstrator</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div class="wrap">
<div class="head">
Login administartor
</div>
<div class="form">
<form name="fform" action="" method="post">
Username : <br/>
<input type="text" name="username"/>
<br/>
Password : <br/>
<input type="password" name="password"/>
<br/>
<input type="submit" value="login" name="button"/>
</form>
</div>
<div class="footer">
copyright © design by aji'hidayatulloh
</div>
</div>
</body>
</html>
jika sudah kemudian simpan kembali , oke kita sudah membuat file index.html , nah jika anda buka file tersebut ,tetapi ingat duluini belum ada file css nya ya , maka tampilannya akan menjadi seperti ini :
Oke mungkin tampilannya sangat sederhana sekali ya , itu karena belum ada file css nya , nah sekarang kita akan membuat file cssnya ,
Step 2
nah jika sudah melalui step 1 , sekarang buatlah dokumen baru , tapi sebelumnya buat dulu direktori baru , beri nama folder itu dengan nama css , ingat lokasinya harus sama dengan lokasi file index.html tadi , seperti ini :
nah kemudian pada dokumen baru yang anda buat , lalu copy dan paste code di bawah ini ,
html{
background: #272822;
color:#fff;
font-family: trado;
}
body{
width: 350px;
height: auto;
margin:auto;
}
.wrap{
width:350px;
height: auto;
float:left;
background: #F9F9F9;
margin-top:150px;
border-radius:5px;
box-shadow: 0px 0px 5px #000;
border:1px solid #DBDCD6;
}
.wrap .head{
width:330px;
height: auto;
padding: 10px;
font-size: 19px;
color:#333;
float: left;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #DBDCD6;
}
.wrap .form{
width:330px;
height: auto;
padding:20px 10px;
float: left;
text-align: center;
}
.wrap .form form{
margin:0;
color:#555;
font-weight: bold;
}
.wrap .form input[type="text"],.wrap .form input[type="password"]{
width: 300px;
height: auto;
padding:10px;
border:1px solid #ccc;
text-align: center;
background: #fff;
box-shadow:inset 0px 3px 5px #CBCCC4;
border-radius:5px;
}
.wrap .form input[type="text"]:focus,.wrap .form input[type="password"]:focus{
width: 300px;
height: auto;
padding:10px;
border:1px solid #BCBCBC;
text-align: center;
outline: none;
box-shadow:inset 0px 3px 5px #999C8B;
background: #fff;
}
.wrap .form input[type="submit"]{
background: -webkit-linear-gradient(top ,#EAEBE7 0%,#D5D6CF 100%);
background: -moz-linear-gradient(center top ,#EAEBE7 0%,#D5D6CF 100%);
border:1px solid #BFC1B7;
padding:5px 10px;
border-radius: 3px;
color:#5B5E51;
font-weight: bold;
margin-top: 5px;
}
.wrap .form input[type="submit"]:hover{
color:#333;
cursor: pointer;
box-shadow: 0px 0px 7px #AAE8F4;
}
.wrap .footer{
width:330px;
height: auto;
padding:8px 10px;
font-size: 11px;
color:#333;
float: left;
background: #EFF0EC;
text-align: center;
border-top: 1px solid #fff;
}
nah jika sudah anda copy dan paste code di atas , kemudian simpan di dalam folder css tadi kemudian ganti namanya menjadi login.css , nah maka form atau tampilan dari form login kita sudah selesai , form login ini bisa anda gunakan untuk login administrator di website yang anda buat besok .
0 comments:
Post a Comment