Membuat sisa karakter pada formulir
Jika kita mengisi sebuah formulir yang disediakan oleh pengelola suatu website, misalnya ketika mengisi judul sebuah iklan kadang apa yang kita tulis terpotong atau judul yang kita tulis tidak semuanya bisa tampil. Hal tersebut terjadi karena pengelola website tersebut membatasi jumlah karakter yang dapat kita tulis untuk judul iklan, tapi tidak memberitahukan berapa jumlah karakter yang tersisa ketika kita mengisi judul iklan kita. Untuk masalah tersebut kita bisa menambahkan keterangan sisa karakter pada formulir yang kita buat. Di bawah ini adalah contoh scriptnya :
Pertama-tama Formnya kita beri nama. Misalnya "myform". Untuk judul iklan kita batasi hanya 30 karakter dan untuk teks iklan kita batasi sampai 255 karakter.
<html>
<head>
<script type="text/javascript">
var maxChar1 = 30;
var maxChar2 = 255;
function initial()
{
document.myform.counter1.value = maxChar1;
document.myform.counter2.value = maxChar2;
}
function count()
{
document.myform.counter1.value = maxChar1 - document.myform.judul.value.length;
document.myform.counter2.value = maxChar2 - document.myform.teks.value.length;
}
</script>
</head>
<body onload="initial()">
<font face=verdana size=2 color=yellow>Perhatikan sisa karakter!!!</font><br>
<form name=myform action="" method=post>
<table align=center bgcolor=#333366>
<tr>
<td valign=top><font face=verdana size=2 color=white>Judul</td>
<td><input type=text name='judul' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter1" size="1"> <blink><-</blink></td></tr>
<tr><td><font face=verdana size=2 color=white>Teks Iklan</td>
<td><input type=text name='teks' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter2" size="1"> <blink><-</blink></td></tr>
<tr><td colspan=2 align=center><input type=submit value=Kirim></td></tr>
</table>
</body>
</html>
Pertama-tama Formnya kita beri nama. Misalnya "myform". Untuk judul iklan kita batasi hanya 30 karakter dan untuk teks iklan kita batasi sampai 255 karakter.
<html>
<head>
<script type="text/javascript">
var maxChar1 = 30;
var maxChar2 = 255;
function initial()
{
document.myform.counter1.value = maxChar1;
document.myform.counter2.value = maxChar2;
}
function count()
{
document.myform.counter1.value = maxChar1 - document.myform.judul.value.length;
document.myform.counter2.value = maxChar2 - document.myform.teks.value.length;
}
</script>
</head>
<body onload="initial()">
<font face=verdana size=2 color=yellow>Perhatikan sisa karakter!!!</font><br>
<form name=myform action="" method=post>
<table align=center bgcolor=#333366>
<tr>
<td valign=top><font face=verdana size=2 color=white>Judul</td>
<td><input type=text name='judul' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter1" size="1"> <blink><-</blink></td></tr>
<tr><td><font face=verdana size=2 color=white>Teks Iklan</td>
<td><input type=text name='teks' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter2" size="1"> <blink><-</blink></td></tr>
<tr><td colspan=2 align=center><input type=submit value=Kirim></td></tr>
</table>
</body>
</html>
Popular Posts
artikel
- form buku tamu
- Cara Mudah Membuat Animasi GIF 3D Menggunakan Aplikasi XARA
- Membuat Menu Navigasi Dengan Subkategori Pada Blogger
- Membuat nomer halaman pada blogger
- Menyimpan File Flash Ke Dalam Format GIF
- banner blog
- box shadow
- cara membuat recent comment
- counter pengunjung
- form online
- form registrasi dan login
- header navigasi
- memasang form pada blog
- membuat bayangan pada image
- membuat efek zoom pada image
- membuat tampilan waku dan jam
recent comment
Thanks mas...scriptnya sangat membantu. Tlg tambah trus tulisannya
ReplyDeleteterima kasih atas komentarnya ya. Mudah-mudahan gak bosen-bosen nulis nih...
ReplyDelete