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

Your email address will not be published. Required fields are marked *

[+] kaskus emoticons nartzco

What is 12 + 4 ?
Please leave these two fields as-is: