tRikSonic
Tema

HTML button Tag

Terakhir diperbarui : 24 Mei 2018 - 23.10
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.
background html
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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <button>, biasanya mempunyai nilai default :
/* none */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.