HTML button Tag -belajar html
<button>, Button mempunyai definisi tombol klik yang dapat digunakan untuk menjalankan fungsi sebuah event. <button> dapat digunakan pada form maupun diluar form.
HTML tag
<button> biasanya digunakan untuk menjalankan perintah javascript yang dilakukan oleh user, dan juga bisa berfungsi sebagai kontrol pada element <form>.
Tips :
Jika element
<button> diperuntukan untuk element <form>, beberapa browser tertentu membacanya dengan nilai yang berbeda, disarankan menggunakan element <input> sebagai penggantinya.
Contoh 1 :
Contoh HTML<button>
<button>klik saya</button>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <button>klik saya</button> </body> </html>
Contoh 2 :
Contoh HTML
<button> yang digunakan untuk menjalankan perintah javascript.
<button onclick="testJavascript();">klik saya</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<button onclick="testJavascript();">klik saya</button>
<script>
function testJavascript() {
alert("ini alert");
}
</script>
</body>
</html>
Contoh 3 :
Contoh HTML
<button> yang digunakan untuk menjalankan perintah javascript library jQuery.
<button id="test-jQuery">klik saya</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<button id="test-jQuery">klik saya</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test-jQuery").click(function(){
alert("ini alert");
});
});
</script>
</body>
</html>
Attributes :
HTML element
<button> mempunyai beberapa attribute yang dikhususkan antara lain sebagai berikut :
autofocus
Digunakan untuk menentukkan bahwa button mendapatkan fokus ketika halaman selesai dimuat.
disabled
Digunakan untuk menentukkan bahwa button tidak aktif atau tidak bisa diklik.
form
Menentukkan fungsi button pada attribut form.
formaction
Menentukan url / link ketika data pada form akan dikirim. Hanya untuk
type="submit".formenctype
Menentukan tipe konten data sebelum mengirimnya ke server. Hanya untuk
type="submit".formmethod
Menentukan metode pengiriman data. Hanya untuk
type="submit".formnovalidate
Menentukan bahwa data tidak harus di validasi sebelum dikirim. Hanya untuk
type="submit".formtarget
Menentukan target tampilan setelah data form dikirim. Hanya untuk
type="submit".name
Menentukan nama button
type
Menentukan type button
value
Menentukkan nilai awal button.
Global Attributes:
Element
<button> mencakup Global Attributes HTML.
Event Attributes:
Element
<button> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<button>, biasanya mempunyai nilai default :
/* none */