HTML button tag | belajar <button> element
Referensi Belajar HTML button tag. Tutorial dan panduan mengenai element <button>...</button>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <button>.
Deskripsi
Penjelasan HTML button
Button dapat diartikan dengan tombol.
HTML element button menunjukkan sebuah tombol yang secara umum memiliki style layaknya sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu.
Konten/teks didalam element button merupakan label dari tombol tersebut. Pada <button> element, dapat pula dimasukkan gambar sebagai tampilan dari tombol itu sendiri, ini yang membedakan antara tombol yang dibuat dengan element <button> dan element <input>.
Setiap browser memiliki tampilan (style) tombol yang berbeda-beda, yang dibuat oleh <button> element. Sebaiknya, tuliskan attribute type yang sesuai sebagaimana dijelaskan dibawah, ketika menuliskan element <button>.
Didalam sebuah element form, sebaiknya gunakan <input> sebagai pengganti dari <button> yang digunakan untuk mengirim data form, karena setiap browser memiliki perbedaan hasil submit form jika menggunakan element <button>.
Attributes
Atribut HTML Tag <button>
Ini merupakan HTML5 Boolean attribute yang digunakan untuk menentukkan bahwa button (tombol) mendapatkan fokus ketika halaman dimuat.
Digunakan untuk menunjukkan bahwa element button tersebut "disabled" (Tidak dapat diklik).
Digunakan untuk menentukkan id element form yang dikaitkan dengan element button.
Digunakan untuk menentukkan URL yang memproses data form ketika form dikirim. Berlaku untuk attribute type="submit".
Menunjukkan form encoded type yang digunakan untuk menentukkan tipe content yang digunakan ketika mengirim form pada server. Berlaku untuk attribute type="submit".
Digunakan untuk menentukkan HTTP method yang dipakai oleh browser untuk mengirimkan data form. Berlaku untuk attribute type="submit".
Digunakan untuk menunjukkan bahwa data form tidak harus di-validasi terlebih dahulu sebelum dikirim. Berlaku untuk attribute type="submit".
Digunakan untuk menentukkan target tampilan setelah data form dikirim. Berlaku untuk attribute type="submit".
Digunakan untuk menentukkan nama button yang berkaitan dengan data form yang akan dikirim.
Digunakan untuk menentukkan tipe (Jenis) dari button.
Digunakan untuk menentukkan initial value sebuah button.
Global Attributes
Atribut Secara Global (Keseluruhan)
<button> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<button> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <button> element
<button type="button">Klik Aku!</button>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML button</title>
<style>
/* style untuk contoh 3 */
button.button-gue{
padding: 0;
background:none;
border: 0;
cursor: pointer;
}
button.button-gue:hover {
opacity: .8;
}
/* dul button. style untuk contoh 4 */
.btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>
<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>
<hr>
<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
onclick="jalankanScript();">Klik Aku</button>
<hr>
<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
<img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>
<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>
<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>
</body>
</html>
SHARE