HTML elemen tag <button> merupakan tag pada HTML yang digunakan untuk menciptakan sebuah tombol yang dapat diklik. Tombol (button) merupakan hal yang lazim digunakan saat mengirimkan formulir untuk dikirimkan menuju server. Pemberian tombol submit pada halaman HTML akan memudahkan pengguna saat proses pengiriman data menuju server.
Penggunaan tombol submit sebenarnya tidak mutlak diberikan. Karena proses form tersubmit menuju server juga dapat dilakukan melalui input type text, saat pengguna menekan tombol enter. Namun pemberian tombol submit pada halaman HTML akan memberikan kepastian bahwa data memang benar akan dikirimkan menuju server.
HTML elemen tag <button> memiliki jenis varian tombol tergantung pada fungsi dan penggunaannya. HTML elemen tag <button> dengan atribut type SUBMIT adalah tombol submit yang berguna untuk meng-submit data untuk diteruskan menuju server. Kemudian elemen tag <button> dengan atribut type BUTTON adalah button biasa yang tidak memiliki efek submit data namun biasanya digunakan untuk keperluan validasi data pada halaman yang aktif via Javascript. Dan elemen tag <button> dengan atribut type RESET yang digunakan untuk menghapus seluruh isian pada form yang sudah diisi oleh pengguna kembali ke posisi awal (default).
Contoh Sederhana Elemen Tag <button>
HTML element tag <button> memiliki tampilan tombol biasa. Tampilannya akan berbeda saat kondisi normal, saat mouse berada di atas tombol, dan saat tombol tersebut diklik. Penampakan tombol dapat diperindah dengan memberikan vairasi gambar pada tombol. Berikut ini contohnya :
HTML
1
2
3
4
5
6
<p>
<button type="button" onclick="javascript:alert('Anda menekan tombol ini');">Tekan disini..</button>
<button type="button" onclick="javascript:alert('Anda menekan tombol keluar');"><img src="img/quit.gif"> Keluar</button>
<button type="button" onclick="javascript:alert('Anda menekan tombol refresh');"><img src="img/refresh-icon.png"> Refresh</button>
<button type="button" onclick="javascript:alert('Anda menekan tombol download');"><img src="img/download.png"> Download</button>
</p>
Jika dijalankan akan menghasilkan :
Berikut contoh penggunaan HTML element tag <button> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag BUTTON</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag BUTTON</h1>
<form action="#" method="post">
<p>
<label>Masukkan Nama Anda : <input type="text" name="nama"></label>
</p>
<p>
<button type="reset">Reset</button>
<button type="submit"><img src="img/cek2.png"> Kirim (disabled)</button>
<button type="button" onclick="javascript:alert('Anda menekan tombol kembali');"><img src="img/arrow_left.png"> Kembali</button>
</p>
</form>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan seperti dibawah ini :
Atribut Khusus
Atribut khusus elemen <button> meliputi :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <button> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <button> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <button> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <button> pada HTML :
CSS
1
/* tidak ada */
Catatan : Elemen HTML <button> type button, submit, reset dengan elemen HTML <input> type button, submit, reset pada dasarnya adalah serupa dalam hal fungsi dan penggunaannya. Jika dilihat dari segi tampilan, elemen HTML <button> memiliki kelebihan karena dapat disisipi teks sekaligus gambar yang menarik. Namun oleh beberapa browser, elemen ini diperlakukan sedikit berbeda jika berjenis submit. Kadang di browser tertentu jika button type submit ditekan tidak secara otomatis memicu fungsi javascript onsubmit yang seharusnya langsung diarahkan ke server untuk pencatatan data.
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
