Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <button> Pada HTML

previous Previous Page

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 :

  • name
    Menentukan nama untuk elemen button.
  • type
    Menentukan jenis button.
    Nilai :
    • button, tombol untuk melakukan tugas yang berhubungan dengan javascript.
    • submit, tombol untuk mengirim seluruh isian data ke server. Di dalam satu elemen form hanya boleh terdapat satu buah tombol jenis submit.
    • reset , tombol untuk mengatur ulang isian dengan nilai default atau kosong.
  • autofocus
    Menentukan elemen button agar tersorot pertama kali saat browser dimuat. Nilai : autofocus
  • disabled
    Menetapkan elemen button menjadi nonaktif dan tidak bisa ditekan atau diklik. Nilai : disabled
  • formaction
    Menetapkan URL tujuan saat data pada form dikirim ke server, hanya berlaku bagi elemen button type submit. Nilai : URL
  • form
    Menetapkan elemen induk dari elemen button, hanya berlaku bagi elemen button type submit. Nilai : id_form
  • formmethod
    Memberitahukan browser, bagaimana cara mengirim data ke server. Hanya berlaku bagi elemen button type submit.
    Nilai :
    • post, mengirimkan data dalam bentuk HTTP POST. Merupakan jenis pengiriman data melalui body halaman HTML secara langsung.
    • get, mengirimkan data dalam bentuk HTTP GET. Merupakan jenis pengiriman data dengan melewatkan parameter data melalui URL.
  • formtarget
    Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan ke server. Hanya berlaku bagi elemen button type submit.
    Nilai : _blank | _self | _parent | _top
  • formencytype
    Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server. Berlaku jika mengirim data dalam bentuk method post, atribut ini hanya untuk button type submit
    Nilai :
    • application/x-www-form-urlencoded, merupakan nilai default.
    • multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
    • teks/plain.

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<button>yayayayaya

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 */

noteCatatan : 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.

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial HTML

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami