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
0 komentar:
Posting Komentar