Salah satu hal yang bisa dilakukan dengan Javascript adalah mengambil data dari form HTML dan menampilkannya lagi ke halaman web. Berikut ini cara yang bisa dilakukan untuk menampilkan data tersebut. Dimulai dari yang paling pertama yaitu form HTML.

Buat form

Form ini digunakan sebagai sarana untuk menuliskan data yang diperlukan. Form dapat dibuat dengan menggunakan elemen "input". Berikut adalah contoh penulisannya.

<div> <span>nama:</span> <input type="text" id="nama"> </div> <div> <span>umur:</span> <input type="number" id="umur"> </div>

Elemen input diberikan atribut id sehingga dapat diakses dengan Javascript. Atribut id juga berfungsi untuk membedakan elemen input satu dengan yang lain.

Misalnya pada contoh penulisan diatas, elemen yang pertama diberikan id dengan nama "nama", dan yang kedua diberikan nama "umur". Elemen pertama dikhususkan sebagai tempat penulisan nama, dan yang kedua dikhususkan untuk umur.

Atribut type juga penting dalam penulisan elemen input. Hal ini untuk menentukan tipe data input. Misalnya pada input "nama", tipe data harus berupa text. Untuk input "umur" tipe data dapat berupa text atau number mengingat keduanya masih dapat menghasilkan angka untuk umur.

Buat Button

Setelah input telah dibuat, selanjutnya adalah membuat tombol untuk memicu javascript membaca data pada form HTML sekaligus untuk menampilkan data tersebut kembali.

Tombol dapat dibuat dengan elemen button atau elemen div biasa dimana dilengkapi dengan atribut onclick. Atribut onclick digunakan untuk menjalankan fungsi tertentu pada saat tombol di klik.

Berikut adalah contoh penulisan dimana menggunakan elemen button.

<button onclick="kirim()">KIRIM</button>

Elemen untuk menampilkan

Bagian terakhir pada HTML adalah tempat dimana data yang diperoleh kemudian ditampilkan. Tempat ini dapat dibuat dengan menggunakan elemen apapun. Pada contoh penulisan berikut, kami menggunakan elemen div

<div id="tampilan"></div>

Untuk elemen tersebut dapat diakses dengan javascript, digunakan atribut id dengan nama "tampilan"

Membuat Javascript Mengenali Elemen HTML

Setelah semua elemen tersedia di HTML, selanjutnya adalah membuat javascript dapat mengenali semua elemen-elemen pada HTML. Elemen yang harus dikenali oleh Javascript adalah elemen input dan elemen untuk menampilkan.

Untuk membaca data pada elemen HTML, digunakan selector "id" seperti pada contoh berikut.

var id_nama = document.getElementById("nama"); var id_umur = document.getElementById("umur"); var id_tamp = document.getElementById("tampilan");

Dengan baris program diatas, Javascript telah mengenali input dan tampilan.

Membuat Fungsi untuk Menampilkan

Fungsi ini bekerja pada saat tombol yang digunakan untuk mengirim data ditekan.

Berikut ini adalah penulisan penulisan fungsi tersebut.

function kirim(){ id_tamp.innerText = id_nama.value +", "+ id_umur.value; }

Pada saat tombol ditekan, dijalankan fungsi kirim(). Fungsi ini mengumpulkan data dari elemen dengan id "nama" dan id "umur" kemudian ditampilkan pada elemen dengan id "tampilan". Data dari kedua elemen tersebut kemudian ditampilkan dengan dipisahkan dengan tanda koma ",".

Berikut adalah hasil dari program-program diatas.

KIRIM

Lihat juga dan .

Sekian, Semoga bermanfaat