Berbagai Fungsi Tag Button Pada HTML

Bagi anda yang senang berselancar di dunia internet pasti sering melihat berbagai macam “tombol” yang terdapat pada web-web yang anda kunjungi, mulai dari yang sederhana hanya berupa tulisan yang bisa di-klik sampai dengan tombol 3 dimensi yang indah. Tombol-tombol tersebut, biasanya dibuat menggunakan kode perintah/script HTML, CSS, PHP, atau Javascript. Dari semua itu, menurut saya HTML adalah yang paling sederhana, namun tetap cukup menarik untuk digunakan. Nah, pada artikel kali ini, saya ingin berbagi pengalaman bagaimana membuat berbagai tombol (button) untuk berbagai fungsi dengan menggunakan  tag <button>  HTLM.

Pada HTML, tag <button> didefinisikan sebagai suatu “tombol tekan” yang berfungsi menjalankan suatu script apabila di-klik. Nah, di dalam suatu elemen “button” ini kita dapat memasukan muatan baik berupa teks atau image. Secara umum, fungsi tag <button> dapat dispesifikasikan menjadi 3 tipe, yaitu :

1. Tag <button> sebagai “tombol” (“button”) biasa
2. Tag <button> untuk “submit”
3. Tag <button> untuk “reset”

Kita perlu memperhatikan ketiga tipe atribut dari button ini, sebab berbeda browser bisa menghasilkan fungsi yang berbeda. Sebagai contoh, untuk Internet Explorer, tipe default dari atributnya adalah sebagai “button” atau tombol, sedang untuk browser lain (termasuk spesifikasi W3C) adalah sebagai “submit”. Yaaa, okelah, yang penting tag <button> didukung oleh semua browser terkemuka seperti Internet Explorer, Mozilla Firefox, Opera, Google Chrome, yang logo-logonya saya perlihatkan seperti di bawah ini :

Ok. Sebelum saya berikan contoh-contoh praktis, silahkan pelajari dulu dua tabel di bawah ini yang suatu saat mungkin anda butuhkan  :

Standar Atribut

Tag <button> mendukung standar atribut-atribut berikut :

Atribut	Value	Keterangan
accesskey	character	Menspesifikasikan shortcut suatu keyboard untuk mengakses suatu elemen
class	classname	Menspesifikasikan suatu "classname" untuk suatu elemen
dir	rtl ltr	Menspesifikasikan arah (direction) teks isi pada suatu elemen
id	id	Menspesifikasikan suatu id unik untuk suatu elemen
lang	language_code	Menspesifikasikan kode bahasa (language)untuk isi pada suatu elemen
style	style_definition	Menspesifikasikan "style" inline untuk suatu elemen
tabindex	number	Menspesifikasikan perintah tab dari suatu elemen
title	text	Menspesifikasikan informasi tambahan (extra) tentang suatu elemen
xml:lang	language_code	Menspesifikasikan kode bahasa untuk elemen, pada dokumen-dokumen XHTML

Event Attributes

Tag <button> mendukung atribut-atribut event berikut:

Atribut	Value	Keterangan
onblur	script	Script akan dijalankan ketika suatu elemen kehilangan fokus ( loses focus)
onclick	script	Script akan dijalankan ketika mouse di-klik
ondblclick	script	Script akan dijalankan ketika mouse di-klik dua kali
onfocus	script	Script akan dijalankan ketika suatu elemen menjadi fokus
onmousedown	script	Script akan dijalankan ketika tombol mouse button ditekan
onmousemove	script	Script akan dijalankan ketika pointer mouse berpindah/bergerak
onmouseout	script	Script dijalankan ketika pointer mouse bergerak keluar dari suatu elemen
onmouseover	script	Script dijalankan ketika pointer mouse bergerak ke suatu elemen
onmouseup	script	Script dijalankan ketika tombol mouse button di-release
onkeydown	script	Script dijalankan ketika suatu "key" ditekan
onkeypress	script	Script dijalankan ketika suatu "key" ditekan dan di-release
onkeyup	script	Script dijalankan ketika suatu "key" di-release

Contoh Tag Button dengan Tipe "Tombol"

Nah, sekarang dengan mengacu pada tabel di atas mari kita coba praktekan beberapa yang sering digunakan, yang lainnya nanti anda praktekkan sendiri, ya !!

Kita mulai dengan fungsi tag <button> sebagai tombol biasa :

- Sintaks Dasar Tag <button>

Sintaks dasar dari suatu tag <button> dalam HTML dituliskan :

<button>.....</button>

Contoh :

<button>klik di sini</button>

Hasilnya adalah :

- Mengatur Ukuran dan Jenis Font

Kadangkala kita ingin membuat tombol dengan font tertentu yang kita anggap menarik dan kita ingin juga mengatur jenis dan ukurannya, maka contoh perintahnya menjadi :

<button style="font: bold 14px verdana">LANJUTKAN</button>

Hasilnya adalah : 

- Mengatur Warna Font

Jika warna font pada tombol ingin kita rubah-rubah, maka contoh perintahnya :

<button style="font: bold 14px verdana ; color: green">LANJUTKAN</button>

Hasilnya adalah :  

- Menyisipkan Image Sebagai Tombol

Saya ambil contoh :

<button><img src="Handphone.jpg" /></button>

Hasilnya adalah :  

Saya rasa cukup ya contoh untuk yang tipe tombol (button). Sekarang saya akan contohkan yang termasuk tipe “submit”.

Contoh Tag Button dengan Tipe "Submit"

Sesuai dengan nama tipenya, yaitu "submit", maka eksekusi pada tombol "Submit" memerintahkan pengiriman data ke alamat yang dituju. Saya contohkan dengan model formulir sedehana menggunakan atribut SUBMIT dan tag <INPUT ...>,  kodenya seperti di bawah ini :

<form action="../artikel/data">
nama: <input name="realname"><br>
email: <input name="email"><p>
<input type=SUBMIT> </form>

Hasilnya :

nama:
email:

Kita bisa mengkastemisasi teks untuk button dengan menggunakan atribut VALUE,  sehingga kodenya menjadi :

<form action="../artikel/data">
nama: <input name="realname"><br>
email: <input name="email"><p>
<input type=SUBMIT value="Kirim">
</form>    

Hasilnya :

nama:
email:

Jika ingin menentukan pilihan dengan menggunakan atribut VALUE, maka kita gunakan event "onClick". Event onClick akan menjalankan script untuk pilihan yang di-klik kotak input-nya oleh pengguna.

Ok, saya contohkan penggalan suatu form pesanan elektronik untuk memilih pesanan produk secara individual atau sekaligus pesan semua. Untuk melengkapi fungsi, saya tambahkan sedikit program bantuan dengan Javascript. Berikut kode lengkapnya :

<script type="text/javascript">
<!--
function checkAll(Formulirpesanan)
{if(Formulirpesanan.belisemua.checked)
   {
   Formulirpesanan.cat.checked = true;
   Formulirpesanan.kuas.checked = true;
   Formulirpesanan.amplas.checked = true;
   Formulirpesanan.tinner.checked = true;
   }}
//-->
</script>
<form action="../artikel/data">
<b>Silahkan Klik di box untuk barang yang anda pesan : </b><br>
<input type=checkbox name="belisemua" 
 onClick="checkAll(this.form)">Beli Semua<p>     
<input type=checkbox name="cat" onClick="checkAll(this.form)">Cat<br>
<input type=checkbox name="kuas" onClick="checkAll(this.form)">Kuas<br>
<input type=checkbox name="amplas"
 onClick="checkAll(this.form)">Amplas<br>
<input type=checkbox name="tinner" onClick="checkAll(this.form)">Tinner<p>
     
<input type=SUBMIT value="submit">
</form>