Tombol merupakan salah satu cara interaksi antara pengunjung website dengan halaman website kita. Tombol pada umumnya digunakan untuk mengirimkan form atau untuk reset form. Tombol untuk reset atau mengulang pengisian form dan tombol untuk mengirimkan form tidak akan dibahas di sini, karena kedua jenis tombol itu akan dibahas pada halaman tutorial selanjutnya. Pada tutorial HTML ini kita akan membahas tentang sebuah tombol tanpa fungsi spesifik. Mari kita mulai tutorial HTML – input tombol.

Tutorial HTML – Input Tombol – Bagian 15 – 8 (Bahasa Indonesia)

Kita dapat menampilkan sebuah tombol di dalam form dengan cara yang cukup mudah. Input tombol merupakan sebuah varian dari tag input. Input tombol dapat diletakkan pada sebuah halaman website dengan meletakkan sebuah tag input dengan atribut type=”button”.

Input tombol biasanya tidak berisi data untuk dikirimkan dan oleh karena itu sebuah input tombol tidak perlu memiliki atribut name untuk mengidentifikasi datanya. Namun, atribut name atau id diperlukan apabila tombol tersebut berinteraksi timbal balik dengan pemrograman client side. Namun, kita tidak akan membahasnya pada tutorial ini. Atribut value diperlukan untuk menampilkan tulisan di atas tombol.

Silahkan perhatikan contoh meletakkan tombol di dalam sebuah dokumen HTML:

 

Tombol akan tampil di dalam contoh halaman website seperti di bawah ini:

Tutorial HTML - Input Tombol - 1

Pada contoh di atas bila kita klik tombol yang bersangkutan. Tombol tersebut tidak akan menghasilkan suatu efek. Tombol di dalam bahasa HTML tidak dapat berfungsi bila tidak dipadukan dengan pemrograman client side.

Contoh pemrograman client side

Pada tutorial ini saya akan memberikan contoh untuk menghubungkan event klik tombol ke bahasa pemrograman javascript. Event klik pada tombol akan dikirimkan apabila tombol yang bersangkutan diklik.

Kita akan menambahkan atribut onClick untuk menangkap dan merespon event klik pada tombol. Kita juga harus menyediakan sebuah script fungsi javacript terlebih dahulu menggunakan tag script. Silahkan perhatikan contoh kode berikut ini:

 

Sekarang saatnya kita mencoba kode di atas yang telah dihubungkan dengan sebuah fungsi javascript. Bila tombol tersebut kita klik maka akan mengeluarkan sebuah kotak pesan, seperti berikut ini:

Tutorial HTML - Input Tombol - Button - 2

Input tombol harus didukung dengan pemrograman client side agar tombol tersebut dapat memberikan fungsi yang berguna terhadap halaman website terkait.

Selanjutnya kita akan melanjutkan tutorial HTMl yang masih mengenai form. Kita akan mempelajari tentang input tersembunyi.

Tutorial HTML – Input Tersembunyi – Bagian 15 – 9 (Bahasa Indonesia)