Membuat Form Login Popup dengan CSS dan Javascript

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Utilitas Popup semacam gambar diatas akan sangat bermanfaat untuk menghemat halaman yang akan ditampilkan pada sebuah website. Biasanya popup seperti itu disebut dengan istilah modal. jika anda menggunakan framework CSS seperti Bootstrap hal ini dapat dengan mudah anda buat karena dalam Bootstrap modal tersebut telah tersedia jadi tinggal dipanggil saja. Bagaimana jika tidak menggunakan Bootstrap ? Berikut saya berikan triknya. 

Untuk membuatnya kita memerlukan Library JQuery dan CSS. Jadi Silahkan Download File Javascript dan Library JQuery disini.
Membuat Form Login Popup dengan CSS dan Javascript
1. Buat Sebuah Folder yang akan menampung File-File Projek anda nantinya. Letakkan File Javascript yang telah anda download kedalam folder tersebut.

2. Buat Sebuah File CSS dengan nama style.css sedangkan isinya dapat anda lihat disini

3. Buat Sebuah File dengan nama index.html Lalu panggil File Javascript dan CSS yang telah anda buat dalam file tersebut. Source code lengkap untuk file index.html adalah sebagai berikut
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="login.js"></script>

<a href="#login-box" title="Login" class="login-window">Form Login</a>

   <!--Login Start-->
     <div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Tutup" alt="Close" /></a>
          <form method="post" class="signin" action="action/login.php">
                <fieldset class="textbox">
             <label class="username">
                <span>Username</span>
                <input id="username" name="username" value="" type="text" placeholder="Username" required/>
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password" required/>
                </label>
                <center><button class="button gray medium" type="submit" name="login">Login</button><button class="button gray medium" type="reset">Hapus</button></center>
                </fieldset>
          </form>
  </div>
  <!--Login End-->

Simpan File Index.html tersebut kemudian coba jalankan. Jika tidak ada kesalahan hasilnya seperti gambar diatas. Selamat mencoba dan Happy Coding. :)
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

3 comments

comments
21 August 2015 at 19:12 delete

Gan File login.php nya ko ga ada yah,,bisa minta gan

Reply
avatar
6 October 2016 at 18:16 delete

Ingin beruntung seperti temen-temen kamu?

Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

Ingin beruntung seperti temen-temen kamu?

Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

Untuk Info lebih lanjut silahkan menghubungi kami melalui :

Pin BB : 2B3C34F4
YM : Aslibandar_CS
Skype : AsliBandar
Telp : +855882388666
FB : AsliBandar

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.