Membuat Form Login Keren



Membuat Form Login Keren - Kita mungkin tahu tugas seorang Petugas ke amanan (Satpam), yang tugasnya ialah menjaga perusahaan agar tidak di bobol orang. Jika ada seseorang (tamu) dengan tanpa keterangan ingin memasuki sebuah perusahaan yang ia jaga maka tidak akan dibiarkan masuk begitu saja. Pasti tentunya, tamu tersebut harus mengisi formulir kunjungan tamu, baru ia akan di bolehkan masuk oleh si Petugas keamanan tersebut. Namun, jika seseorang sudah memiliki id card dan keterangan yang jelas maka si petugas keamanan (Satpam) tersebut, tentu saja tidak akan mempersulit untuk seseorang memasuki perusahaan tersebut.

Dan cara kerja form login tersebut sama seperti petugas keamanan diatas. Kita ibaratkan form login adalah seorang petugas keamanan (Satpam), halaman sebuah website Toko Online adalah perusahaan dan id card adalah username dan passwordnya. Ketika seseorang ingin memasuki halaman utama sebuah website Toko Online maka yang pertama dihadapi sipengunjung website adalah form login, dan untuk login sipengunjung harus mempunyai username dan passwordnya untuk syarat masuk ke sebuah halaman utama website Toko Onloine. Jika belum ada username dan passwordnya maka secara otomatis si pengunjung harus di data terlebih dahulu dengan cara mendaftar sebagai user/pengguna di website Toko Online tersebut.

Mungkin penjelsannya cukup sampai disini saja tentang cara kerja form login, semoga anda dapat memahami apa yang saya sampaikan di atas. Dan mohon maaf jika penjelasan diatas membuat anda tambah bingung. Baik kita langsung saja ke inti postingan kita kali ini dan silahkan ikuti langkah - langkah Membuat Form Login Keren. 

 Langkah pertama :
Kita buat form login terlebih dahulu, lalu simpan dengan index.html .


<html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="wrap">
<div id="container">
<form method="POST" action="proses.php">
    <caption><h1>Form Login</h1></caption>
<label>Username</label><br>
<input type="text" name="user" class="user" placeholder="Username" required><br><br>
<label>Password</label><br>
<input type="password" name="pass" class="pass" placeholder="Password" required><br><br>
<input type="submit" name="masuk" class="btn" value="Masuk">
<input type="reset" name="batal" class="btn" value="Batal">
</div>
</div>
</form>
</body>
</html>


Langkah kedua:
Selanjutnya kita buat file css nya dan kita simpan namanya dengan style.css :

*{ font-family: sans-serif, verdana; }

body { background: url('img/1.jpg'); }

#wrap { width: 500px; margin: 0px auto; }

#container { width: 500px; background: rgba(0,0,0,0.7); text-align: center; border-radius: 10px; margin-top: 100px; box-shadow: 0px 1px 8px white; }

h1 { color: white; font-family: verdana; }

label { float: left; color: white; margin-left: 75px; }

.user { width: 70%; height: 35px; margin: 15px; border-radius: 5px; }

.pass { width: 70%; height: 35px; margin: 15px; border-radius: 5px; }

.btn { margin-top: 50px; margin-bottom: 60px; width: 100px; height: 35px; background: #003366; border-radius: 5px; border: 0px; color: white; font: 14px verdana; font-weight: bold; }

p { text-align: left; color: gold; margin-left: 10px; padding-bottom: 5px; font: 12px verdana; }



Untuk link URL nya silahkan anda ganti dengan link URL gambar yang anda download. Untuk mendownloadnya silahkan klik link download dibawah ini.




Ok Mungkin cukup sekian dari saya silahkan anda mencobanya sendiri dan saya berharap anda tetap mengunjungi website kami ini yang akan selalu mengupdate postingan tentang ilmu pengetahuan dan membagikannya ke anda sipembaca untuk dipelajari dan dipahami.

Jika anda menyukai artikel Membuat Form Login Keren ini, mohon kiranya untuk meluangkan waktu agar bisa membagikan artikel ini kepada temen temen yang lain yang mungkin membutuhkan informasi ini, agar mereka bisa membaca dan mengetahui artikel ini,

Agar tidak ketinggalan update, atau tidak ketinggalan artikel-artikel lainya yang lebih baru, silahkan berlangganan dengan cara memasukan email aktif pada kolom yang sudah disediakan dibawah,



Lisensi Creative Commons. DMCA.com Protection Status

Aktifkan Pemberitahuan GRATIS Via Email, Agar kamu tidak ketinggalan update artikel terbaru dari kami, Masukan email anda dibawah ini, dan klik berlangganan:

Setelah Klik Tombol Berlangganan Silahkan Periksa Email kamu, dan Klik Link Validasi yang dikirim

Bagikan dengan link pendek : GOO.GL
Bagikan artikel ini :
+
0 Komentar untuk "Membuat Form Login Keren"

Silahkan berikan komentar yang baik, Komentar anda adalah masukan yang sangat berharga bagi saya, Jika mau request silahkan tuliskan juga dikolom komentar ya kawan,

Dilarang Komentar
1. Promosi Jenis Apapun
2. Dilarang bully
3. Dilarang Spam
4. Dilarang Pasang Link Aktif,
5. Tidak sesuai dengan topik yang dibahas

Pelanggaran mengakibatkan komentar kamu akan dihapus tanpa pemberitahuan..!!

By : Admin Tutorapk.com

 
CopyrightCopyright © 2017 - 2018 Tutorapk.com