PENGGUNAAN TAG BUTTON

kemaren ada yang mintak di beri tutornya HTML,nah nih q pnya sedikit tutor.,tapi agak loncat langsung ke pembuatan 
tombol(button.,.,ok.langsung aja.,.,

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>

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 ?






BY:http://www.web4profit.com/artikel/tutorial/tag-button-html.html