Setiap website pasti akan membutuhkan halaman login dan register untuk mengetahui siapa saja member dari anggota website tersebut. Kali ini saya akam memberikan tutorial pembuatan Form login dan diperindah dengan CSS.
Berikut adalah script html. beri nama file ini dengan nama login.html.
<html>
<head>
<title> Form Login Type 1 </title>
<link href="style1.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="utama">
<div class="header">
<div class="header_isi">
<div class="gambar">
<form action="login.php" method="POST">
<img src="img/logo_code_user.png" ><br /><br />
<input type="text" name="username" placeholder="Username" class="login_regis"> <br />
<input type="password" name="password" placeholder="Password" class="login_regis"> <br />
<div class="chexbox">
<input type="checkbox" name="chek" > Remember me <br />
</div>
<input type="Submit" name="login" value="LOGIN" class="tombol_login">
</form>
</div>
</div>
<div class="copyright">
CopyRight© 2016 | Design By: <a href="codeuser.blogspot.com"> Code User </a> | City : Bandar Lampung.
</div>
</div>
</body>
</html>
Penjelasannya :
1. pada text yang berwarna hijau untuk memanggil file style.css / atau style
halaman .
2. pada text yang berwarna merah berfungsi untuk membuat Form input login,
dan action pada tag pembuka form berfungsi untuk menujukan halaman
yang ingin dituju.
3. pada text yang berwarna biru tua berfungsi sebagai input type text dan
password unutk mengisi nama dan password yang telah terdaftar.
4. pada text yang berwarna kuning (input type submit) berfungsi untuk
memindahkan halaman yang ingin dituju.
jika Script diatas telah dibuat dan disave dengan nama login.html, maka hasilnya akan seperti gambar dibawah ini.
( untuk imagesnya individu ya. )
Selanutnya kita akan membuat tampilan atau style pada website. buat file dengan nama style1.css.
Berikut Scriptnya :
*{
padding: 0px;
margin: 0px;
}
#utama {
background-image: url("img/248262_dziewczyna_teczka_manga_anime_fantasy.jpg");
background-size: cover;
height: 680px;
}
.header_isi {
width: 335px;
height: 230px;
padding: 180px 0px 90px 480px;
}
.gambar {
background-color: rgba(170, 114, 123 ,0.6);
height: 330px;
border: 2px solid rgba(170, 114, 123 ,1);
}
img {
width: 250px;
height: 100px;
margin-left: 45px;
margin-top: 15px;
}
.login_regis {
height: 40px;
width: 260px;
text-align: center;
color: white;
font-size: 17px;
border-radius: 8px;
background-color: rgba(225, 255, 255, 0.4);
border: 3px solid #0288D1;
margin-left: 42px;
margin-top: 10px;
}
.tombol_login {
width: 260px;
height: 30px;
text-align: center;
background-color: #0288D1;
color: white;
font-size: 17px;
border: 2px solid #0288D1;
border-radius: 8px;
margin-top: 20px;
margin-left: 42px;
}
.chexbox {
font-size: 15px;
color: white;
margin-left: 45px;
margin-top: 10px;
}
.login_regis:hover {
border: 3px solid #fff;
}
.tombol_login:hover {
background-color: white;
color: #0288D1;
border: 2px solid white;
}
.copyright {
margin-top: 150px;
color: #0288D1;
font-size: 17px;
margin-left: 10px;
}
a {
text-decoration: none;
color: black;
}
.copyright a {
color: #0288D1;
}
Pemberitahuan :
1. Pada #utama backgroung images : Url(" (Beri nama gambarnya.jpg/png/DLL ) ");
jika sudah membuat Script yang seperti diatas, dan telah diSave dengan nama Style1.css , maka hasilnya akan seperti ini :
Tara itu hasilnya dan kmu telah berhasil membuat Form login.
Semoga bermanfaat, dan terima kasih.
Mau Tempalate yang lebih bagus dan responsive ? Telah kami sediakan, silakan Kunjungi link ini " Membuat Template Login HTML dan CSS " Bisa unduh File juga lohh. silakan kunjungi segera.
thank's sob
ReplyDeletecara menyimpan hasil registernya bagaimana
ReplyDeletemaaf sebelumnya. pada artikel ini saya hanya memberikan cara membuat tampilnya saja. tidak dengan membuat sistem pendaftaran dan loginnya. jadi pada artikel ini hanya membuat tampilan login dengan html dan css.
Deletemakasih min langsyung berhasil
ReplyDeleteKak .. mau tanya , untuk gambar Code User ($) codingannya yang mana ?
ReplyDeleteUntuk pengambilan gambar menggunakan code
Delete=> "< img src="img/logo_code_user.png" >" (tanpa tanda petik)
Jadi kamu bisa memanggil gambar sesuai letar folder gambar yang kamu taro. misalnya gambar yang kamu mau ambil itu kamu taro di satu folder dengan file index.html kamu bisa cukup memangilnya dengan nama_imagenya.jpg/gif/png/dll
jika di dalam folder yang berbeda kamu bisa memanggilkannnya dengan nama folder/nama_image.jpg/gif/png/dll
dan jika images di luar folder index kamu bisa menggunakan => ../nama_folder_atau_langsung_nama_images
Note : src pada code img berfungsi untuk memanggil nama images pada code img.
kak mau tanya kok backgroundnya nggak muncul ya?
ReplyDeleteSaya telah memberi tau bahwa saya telah membuat div id utama, disitu saya memberikan style pada id utama sebagai background pada div id utama, kamu bisa memilih gambar gambar kesukaan amu secara pribadi dengan cara mengganti nama images kamu. kalo masalah background tidak muncul, dikarenakan saya tidak memberikan sebuah gambar yang dapat di unduh sekaligus. sehingga dapat langsung digunakan. Maaf atas ketidak nyamanannya :)
DeleteIni Scriptnya Di Taruh Dmana?
ReplyDeleteTerima kasih atas ilmunya, belum sempurna sih jadinya tapi udah ada sedikit gambaran dan paham sedikit2, thanks..
ReplyDeleteTerima kasih kembali.
Deletekalau copyrightnya tidak nyatu sm background kenapa ya?
ReplyDeleteBang mau tanya, kalo di klik login cara ngelink kan nya gmna ya?
ReplyDeleteterimakasih sangat bermanfaat
ReplyDeletehttp://blog.binadarma.ac.id/ay_ranius
http://agensbobetterpercaya.net/agen-bola-piala-dunia-2018/
ReplyDeleteInfo Piala Dunia 2018
ReplyDeletethanks gan
ReplyDeleteGan, gimana caranya biar gambar full 1 layar gak usah berbentuk thumbnail?? terus biar kotaknya pas ditengah utk form login?? punya saya ada dipinggir kiri
ReplyDeleteDetail bangt sob tngks ya tutor nya bermanfaat sekali
ReplyDeleteTaruh di mana min?
ReplyDeleteterimakasih kak, artikelnya sangat membantu kak, semoga bermanfaat untuk orang banyak
ReplyDeleteThis comment has been removed by the author.
ReplyDelete