Announcement

May 2013
M T W T F S S
« Feb   Jun »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Tags

Where are You From?

Membuat Interactive INPUT pada HTML

Pada pemrograman visual seperti visual basic dan visual foxpro terdapat kotak input yang bisa langsung berinteraksi dengan pemakai. Sebagai contoh kita memiliki form seperti gambar di bawah ini.

interactive_inputPada saat user memasukkan angka Gaji Pokok dan atau potongan maka secara otomatis kotak input Gaji Bersih akan berubah sesuai dengan data yang dimasukkan. Interactive Input ini bisa dimanfaatkan untuk berbagai keperluan seperti berisikan keterangan jenis kelamin dan sebagainya. Code HTMLnya dapat dilihat dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<script>
  function my_hitgaji()
  {
   document.getElementById('gaji_bersih').value=
   document.getElementById('gapok').value - 
   document.getElementById('potong').value;
   return true;
  }
</script>
</head>
<body>
<b>Form Input Data Gaji</b><br><br>
<form>
<table>
  <tr>
     <td>NIP</td>
     <td>:</td>
     <td><input type="text" name="nip" size="13" maxlength="13"></td>
  </tr>
  <tr>
     <td>N A M A</td>
     <td>:</td>
     <td><input type="text" name="nama" size="50" maxlength="50"></td>
  </tr>
  <tr>
     <td>Gaji Pokok</td>
     <td>:</td>
     <td><input type="number" name="gapok" size="8" maxlength="8" onchange="my_hitgaji()"></td>
  </tr>
  <tr>
     <td>Potongan</td>
     <td>:</td>
     <td><input type="text" name="potong" size="8" maxlength="8" onchange="my_hitgaji()"></td>
  </tr>
  <tr>
     <td>Gaji Bersih</td>
     <td>:</td>
     <td><input type="number" name="gaji_bersih" size="10" maxlength="10" readonly></td>
  </tr>
</table>
</form>
</body>
</html>

 

Selamat Mencoba ..!

 

 

 

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

[+] kaskus emoticons nartzco

What is 9 + 13 ?
Please leave these two fields as-is: