Berbagai Fungsi Tag Button Pada HTML
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 : klik di sini
- 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 : LANJUTKAN
- 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 : LANJUTKAN
- 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>
Jika dijalankan, ini hasilnya : (silahkan di klik-klik untuk mengevaluasi hasilnya)
Silahkan Klik di box untuk barang yang anda pesan :
Beli Semua
Cat
Kuas
Amplas
Tinner
Ok. Sudah cukup contohnya. Sekarang saya contohkan yang tipe "Reset", ya!!
Contoh Tag Button dengan Tipe "Reset"
Tombol tipe "reset", bisa dikatakan diperlukan, bisa juga tidak. Sebagian perancang web, tidak berminat menampilkan tombol tipe ini.
Tombol reset sendiri biasanya berpasangan dengan tombol "submit" atau "kirim", contoh yang paling sederhananya adalah :
<form action="../artikel/data">
<input type=text>
<input type=SUBMIT value="Kirim">
<input type=RESET>
</form>
Hasilnya :
Dalam hal ini, tombol "reset" digunakan untuk meng-clear-kan data sebelum memasukkan data baru atau membatalkan pemasukkan data yang salah.
Kita dapat juga memodifikasi dengan menambahkan event "onReset" dan atribut VALUE pada tag <FORM.....>, seperti contoh berikut :
<form action="../artikel/data">
OnReset="return confirm('Anda ingin mereset semua ?')">
<input type=SUBMIT value="Kirim">
<input type=RESET value="Reset Semua">
</form>
Ini hasilnya :
Nah, coba anda ketikkan sesuatu pada box, setelah itu tekan tombol "reset"........!! Sudah ?
Bisa terlihat khan hasilnya ?
Ok. Selamat mencoba-coba lebih lanjut sesuai kreatifitas anda. Semoga artikel ini bisa bermanfaat untuk melengkapi web anda.
Share on Twitter Share on Delicious Subscribe to Feeds RSS
ARTIKEL TERBARU
Sekali Lagi Tentang Format Image: GIF, JPEG, dan PNG
Berbagai Fungsi Tag Button Pada HTML
35 Link Menarik Bagi Para Perancang Website
Kode Hex Warna Untuk Perancangan Website HTML
Website, Domain, dan Hosting
LINK PENTING UNTUK ANDA
Download berbagai informasi penting bagi anda, berisi ebook, freeware, tutorial, dll.
Barangkali anda memerlukan DOMAIN dan HOSTING untuk website anda !!
Protect your affiliate links in 10 seconds or less.
Links to Selected Web Development Tools for Your Downloading Pleasure
Best free download ebooks library. It's the open directory for free ebooks and download links. No registration, No sign ...
Free Downloads of over 14000 free software programs. All freeware downloads include ratings, reviews and screen shots.
AREA SPONSOR MINI
Paket Supeeeeeer Murah, Irit dan Gede untuk Domain dan Hosting, hanya di RUMAHOSTING
Ingin jadi penulis ebook yang SUKSES ? Ingin membangun bisnis ebook di rumah ? Tutorial praktis dan cepat bisa anda dapatkan melalui paket USAHA TERBAIK yang akan membimbing anda step-by-step sampai anda menjadi penulis ebook handal.
Pusatnya download segala informasi yang anda butuhkan dari internet, pastinya PLASADOWNLOAD yang terbaik.
Ingin ATM anda bertambah 1 juta per hari dari bisnis online, coba anda simak informasinya di GYGAPRO
Untuk mahasiswa, karyawan, ibu rumah tangga, atau pensiunan yang ingin membangun bisnis online dengan menulis ebook, dapatkan tutorial terbaiknya di TUTORIAL BISNIS EBOOK. Jangan tunda lagi rencana anda !!
Desain dan isi oleh : Hernandi IR.
Copyright © 2009-2011 web4profit, All Rights Reserved | Pengelola | Info Iklan | Disclaimer
Tidak ada komentar:
Posting Komentar