Pages

▼

Senin, 04 Maret 2013

Membuat Efek Watermark Pada Form

Watermark merupakan suatu efek jquery yang akan menampilkan tulisan transparan pada form, dan ketika mouse melakukan klik pada form tersebut, tulisan tersebut akan hilang.  Banyak sekali website yang sudah menggunakan teknik ini. seperti Yahoo, Facebook, dll. Dengan menggunakan teknik watermark ini akan menjadikan suatu website lebih profesional dan akan memudahkan pengunjung lebih mengerti untuk melakukan pengisian form pada website. 





Buatlah program untuk menampikan formnya, seperti ini

<html>
<head>
 <title>Blog Tutorial - Watermark</title>
</head>
<body>
<center>
<h3><b>LOGIN ADMINSTRATOR<br>
Membuat efek watermark pada form</b></h3>
<table>
<form>
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" id="username"></td></tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="text" id="password"></td></tr>
</form>
</table>
<input type="submit" value="Kirim">
<input type="reset" value="Hapus"><br><br>
sistem informasi | hadi kurniawan 2013
</body>
</html>


Jika anda jalankan, akan menghasilkan output seperti ini:

masih dalm program yang sama.
untuk menambahkan efek watermark
tambahkan skrip barikut ini didalam kode  <head>   TAMBAHKAN DISINI </head>

<script type="text/javascript" src="../jquery/jquery.js"></script>
 <script type="text/javascript" src="../jquery/jquery.watermark.min.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
  $("#username").watermark("Masukkan Username");
  $("#password").watermark("Masukkan Password");
 });
 </script>


sebelumnya anda harus memiliki 2 library jquery, yaitu jquer.js dan jquery.watermark.js
anda bisa mendapatkannya disitus resmi jquery.

jika anda jalankan, maka akan menghasilkan output seperti dibawah ini






di

3 komentar:

  1. Anonim5 Juni 2013 pukul 08.34

    mas, kalo dalam satu form di selipin 2 jquery gmna ya?
    contoh nya kyk create account gmail.
    disitu ada plugin watermark dan validasi??
    kalo punya tutornya minta dong,
    please info in link tutor nya??
    thanks before

    BalasHapus
  2. Anonim3 Desember 2013 pukul 08.54

    Ada kah cara membuat efek watermark tanpa jquery ?? thanks :)

    BalasHapus
  3. Anonim3 Desember 2013 pukul 09.10

    kurang ngerti yg di jquerynya

    BalasHapus

Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.

Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia