Scribd Logo
Unggah

Selamat datang di Scribd!

  • Object Select & TextArea

    Diunggah oleh

    zentharitheconoxis
    7 tayangan4 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan4 halaman

    Object Select & TextArea

    Diunggah oleh

    zentharitheconoxis

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 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