Scribd
Unggah
20 tayangan

Object Select & TextArea

Dokumen menjelaskan penggunaan objek TextArea dan Select dalam HTML untuk memasukkan dan menampilkan data. Pada bagian form, TextArea dan Select digunakan sebagai input sedangkan input teks sebagai output. Fungsi JavaScript digunakan untuk mengambil nilai input dan menetapkannya ke output.

Diunggah oleh

zentharitheconoxis
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
20 tayangan

Object Select & TextArea

Dokumen menjelaskan penggunaan objek TextArea dan Select dalam HTML untuk memasukkan dan menampilkan data. Pada bagian form, TextArea dan Select digunakan sebagai input sedangkan input teks sebagai output. Fungsi JavaScript digunakan untuk mengambil nilai input dan menetapkannya ke output.

Diunggah oleh

zentharitheconoxis
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Objek TextArea

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Dengan Objek TextArea</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 3px solid;
border-radius: 8px;
}

h1, h3 {
margin-bottom: 15px;
}
</style>
</head>
<body>

<script language="JavaScript">
<!--
function tekan() {
// Mendapatkan nilai dari TextArea dengan nama "Ket"
var ketstr = document.fform.Ket.value;

// Menetapkan nilai TextArea dengan nama "Oket" sesuai dengan nilai yang
diperoleh
document.fform.Oket.value = ketstr;
}
//-->
</script>

<form name="fform">
<h1>Memasukkan Data Dengan Objek TextArea</h1>
<hr>
<h3>Keterangan:</h3>
<textarea name="Ket" rows="3" cols="30"></textarea>
<br><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>

HTML Structure:

Pada bagian <form>, elemen-elemen HTML digunakan untuk membuat form. Detailnya:

• <form name="fform">: Membuat form dengan nama "fform".


• <h1>..., <h3>...: Menampilkan judul dan subjudul pada halaman.
• <textarea name="Ket" rows="3" cols="30"></textarea>: Membuat TextArea
dengan nama "Ket" dengan ukuran 3 baris dan 30 kolom.
• <input type="button" value="Kirim" onclick="tekan()">: Tombol "Kirim"
yang memanggil fungsi tekan() saat ditekan.
• <input type="reset" value="Ulang">: Tombol "Ulang" untuk mengosongkan
TextArea.
• <textarea name="Oket" rows="3" cols="30"></textarea>: TextArea dengan
nama "Oket" untuk menampilkan output keterangan.

JavaScript Function:

Pada bagian <script>, terdapat fungsi JavaScript. Fungsi tekan() dijelaskan sebagai
berikut:

• function tekan(): Ini adalah fungsi yang akan dijalankan saat tombol "Kirim" ditekan.
• var ketstr = document.fform.Ket.value;: Mendapatkan nilai dari TextArea
dengan nama "Ket".
• document.fform.Oket.value = ketstr;: Menetapkan nilai ke TextArea dengan nama
"Oket".

CSS Styling:

Pada bagian <style>, aturan CSS digunakan untuk memperindah tampilan halaman.
Detailnya:

• body: Menetapkan font, lebar maksimum, margin, padding, dan border untuk area body.
• h1, h3: Memberikan margin bawah pada elemen-elemen h1 dan h3.
Objek Select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Dengan Objek Select</title>
</head>
<body>

<script language="JavaScript">
<!--
function tekan() {
// Mendapatkan nilai dari objek Select dengan nama "Jurusan"
var jurusanstr = (document.fform.Jurusan.value);

// Menetapkan nilai ke elemen input dengan nama "Ojurusan"


document.fform.Ojurusan.value = jurusanstr;
}
//-->
</script>

<form name="fform">
<h1>Penggunaan Objek Select</h1>
<hr>
<h3>Masukan :</h3>
<p>Jurusan Di UNIKOM :
<select name="Jurusan" Size="1">
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Manajemen Informatika">Manajemen
Informatika</option>
<option value="Teknik Komputer">Teknik Komputer</option>
<option value="Teknik Industri">Teknik Industri</option>
<option value="Teknik Elektro">Teknik Elektro</option>
<option value="Teknik Sipil">Teknik Sipil</option>
<option value="Teknik Arsitektur">Teknik Arsitektur</option>
<option value="Teknik Perencanaan Wil. Kota">Perencanaan Wil.
Kota</option>
</select>
</p>
<p>
<input type="button" value="Kirim" onclick="tekan()">
<input type="reset" value="Ulang">
</p>
<h3>Output jurusan :</h3>
<input type="text" name="Ojurusan" size="30">
</form>
</body>
</html>

HTML Structure:

• Elemen-elemen HTML digunakan untuk membuat form. Detailnya:


o <form name="fform">: Membuat form dengan nama "fform".
o <h1>..., <h3>...: Menampilkan judul dan subjudul pada halaman.
o <select name="Jurusan" Size="1">...</select>: Objek Select untuk
memilih jurusan.
o <option value="...">...</option>: Opsi-opsi dalam objek Select.
o <input type="button" value="Kirim" onclick="tekan()">: Tombol
"Kirim" yang memanggil fungsi tekan() saat ditekan.
o <input type="reset" value="Ulang">: Tombol "Ulang" untuk
mengosongkan elemen input.
o <input type="text" name="Ojurusan" size="30">: Elemen input untuk
menampilkan output jurusan.

JavaScript Function:

• Fungsi tekan() dijelaskan sebagai berikut:


o function tekan(): Fungsi yang akan dijalankan saat tombol "Kirim" ditekan.
o var jurusanstr = (document.fform.Jurusan.value);: Mendapatkan nilai
dari objek Select dengan nama "Jurusan".
o document.fform.Ojurusan.value = jurusanstr;: Menetapkan nilai ke
elemen input dengan nama "Ojurusan".

Anda mungkin juga menyukai