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 ..!

 

 

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
CommentLuv badge
[+] kaskus emoticons nartzco

 
What is 13 + 9 ?
Please leave these two fields as-is:
0 Comments
Inline Feedbacks
View all comments