1. Objek Check Box
Contoh :
<html>
<head><title>Latihan Dengan Objek Checkbox</title></head>
<body>
<script language ="JavaScript">
<!--
function radio_box(form) {
var ket = "";
var ket1 ="";
if (form.bola.checked == true) {
ket = "Nonton bola";
}
if (form.tv.checked == true) {
ket1 = "Nonton TV";
}
alert('Hobby anda ' + ket + ' ' + ket1);
}
//-->
</script>
<form>
<H2>Objek Checkbox</H2>
<p>Hobby anda:
<input type="checkbox" value="ON" name="bola">Nonton sepak bola
<input type="checkbox" value="ON" name="tv">Nonton Televisi
<p><input type="button" value="CONFIRM" onClick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
2. Objek Radio
Contoh
<html>
<head><title>Latihan Dengan Objek Radio</title></head>
<body>
<script language ="JavaScript">
<!--
function radio_box(form) {
var ket = "";
if (form.wanita.checked == true) {
ket = "wanita";
}else {
ket = "pria";
}
alert('Anda adalah seorang ' +ket);
}
//-->
</script>
<form>
<H1>Objek Radio</H1>
<p><input type="radio" value="wanita" name="wanita">wanita
<p><input type="button" value="CONFIRM" onClick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
3. Objek Select
Contoh
<html>
<head><title>Latihan Dengan Objek Select</title></head>
<body>
<script language ="JavaScript">
<!--
function tekan()
{
var jurusanstr = (document.fform.Jurusan.value);
document.fform.ojurusan.value = jurusanstr;
}
//-->
</script>
<form name="fform">
<H1>Objek Select</H1>
Jurusan Di UNPUR :
<select name="Jurusan" Size="1">
<option value ="Teknik Informatika">Teknik Informatika</option>
<option value ="Manajemen Informatika">Manajemen Informatika</option>
<option value ="Ilmu Komunikasi">Ilmu Komunikasi</option>
</select>
<p><input type="button" value="kirim" onClick="tekan()">
<input type="reset" value="ulang">
<p>Output jurusan : <input type="text" name="ojurusan" size="30">
</form>
</body>
</html>
4. Objek Text
Contoh
<html>
<head><title>Latihan Dengan Objek Text</title></head>
<body>
<script language ="JavaScript">
<!--
function tekan(){
var namastr = (document.fform.nama.value);
var alamatstr = (document.fform.alamat.value);
document.fform.onama.value = namastr;
document.fform.oalamat.value = alamatstr;
}
//-->
</script>
<form name ="fform">
<H1>Objek Teks</H1>
<PRE>
Nama Anda : <input type="text" name="nama">
Alamat
: <input type="text" name="alamat">
<PRE><BR>
<input type="button" value="kirim" onClick="tekan()">
<input type="reset" value="ulang">
<H3>Output</H3>
<PRE>
Nama Anda adalah :<input type="text" name="onama">
Alamat Anda di
:<input type="text" name="oalamat">
</form>
</body>
5. Objek Text
Contoh
html>
<head><title>Latihan Dengan Objek TextArea</title></head>
<body>
<script language ="JavaScript">
<!--
function tekan()
{
var ketstr = (document.fform.Ket.value);
document.fform.Oket.value = ketstr;
}
//-->
</script>
<form name ="fform">
<H2>Objek TextArea</H2>
Keterangan : <br>
<textarea name="Ket" rows="3" cols="30"></textarea><BR>
<input type="button" value="kirim" onClick="tekan()">
<input type="reset" value="ulang">
<H3>Output Keterangan :</H3>
<textarea name="Oket" rows="3" cols="30"></textarea>
</form>
</body>
</html>
Contoh Apabila Semua Objek Disatukan Dalam 1 form
<html>
<head><title>HOME WORK HENDRIANA</title></head>
<body background="c8.jpg">
<script language ="Javascript">
<!--
function tekan(){
var namastr = (document.fform.nama.value);
var npmstr = (document.fform.npm.value);
var alamatstr = (document.fform.alamat.value);
var agamastr = (document.fform.agama.value);
var jurusanstr = (document.fform.jurusan.value);
var priastr = (document.fform.pria.value);
var wanitastr = (document.fform.wanita.value);
document.fform.onama.value = namastr;
document.fform.onpm.value = npmstr;
document.fform.oalamat.value = alamatstr;
document.fform.oagama.value = agamastr;
document.fform.ojurusan.value = jurusanstr;
var ket = "";
var ket1 = "";
var ket2 = "";
var ket3 = "";
if (document.fform.eating.checked == true) {
ket = "Eating";
}
if (document.fform.touring.checked == true) {
ket1 = "Touring";
}
if (document.fform.browsing.checked == true) {
ket2 = "Bowsing";
}
if (document.fform.chatting.checked == true) {
ket3 = "Chatting";
}
document.fform.ohobby.value='Hobby anda ' + ket + ' , ' + ket1 + ' ,' + ket2 + ' ,' + ket3;
var ket4 = "";
var ket5 = "";
if (document.fform.pria.checked == true) {
ket4 = "Laki-Laki";
}
if (document.fform.wanita.checked == true) {
ket5 = "Wanita";
}
document.fform.okelamin.value=ket4 + ket5;
}
//-->
</script>
<form name ="fform">
<pre>
<tr>
<td>
<font size="7">MASUKAN DATA MAHASISWA </font>
<font size="5">
1. NAMA MAHASISWA : <input type="text" size="50" name="nama">
2. NPM : <input type="text" size="50"name="npm">
3. ALAMAT :
<textarea name="alamat" rows="9" cols="39"></textarea>
4. JENIS KELAMIN : <input type="radio" value="wanita" name="wanita"> Wanita
<input type="radio" value="pria" name="pria"> Laki-Laki
<font>
</pre>
<pre>
5. AGAMA : <select name="agama" size="1">
<option value ="Islam">Islam</option>
<option value ="Katolik">Katolik</option>
<option value ="Hindu">Hindu</option>
<option value ="Budha">Budha</option>
</select>
</pre>
<pre>
6. JURUSAN : <select name="jurusan" size="1">
<option value ="Teknik Informatika">Teknik Informatika</option>
<option value ="Manajemen Informatika">Manajemen Informatika</option>
<option value ="Teknik Industri">Teknik Industri</option>
<option value ="Hukum">Hukum</option>
<option value ="Fisip">Fisip</option>
</select>
</pre>
<pre>
7. HOBBY : <input type="checkbox" value="ON" name="eating"> Eating
<input type="checkbox" value="ON" name="touring"> Touring
<input type="checkbox" value="ON" name="browsing"> Browsing
<input type="checkbox" value="ON" name="chatting"> Chatting
</pre>
</pre><br>
<input type="button" value="kirim" onClick="tekan()">
<input type="reset" value="ulang">
</td>
<td>
<pre>
</font>
<font size="7"CHECK KEMBALI</font>
<font size="5">
1. NAMA MAHASISWA : <input type="text" size="50" name="onama">
2. NPM : <input type="text" size="50" name="onpm">
3. ALAMAT :
<textarea name="oalamat" rows="9" cols="39"></textarea>
4. JENIS KELAMIN : <input type="text" size="50" name="okelamin">
5. AGAMA: <input type="text" size="50" name="oagama">
6. JURUSAN : <input type="text" size="50" name="ojurusan">
7. HOBBY : <input type="text" size="50" name="ohobby">
</font>
</pre>
</td>
</form>
</body>
</html>
