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

TIPS

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>

autofocus

Ini merupakan HTML5 Boolean attribute yang digunakan untuk menentukkan bahwa button (tombol) mendapatkan fokus ketika halaman dimuat.

disabled

Digunakan untuk menunjukkan bahwa element button tersebut "disabled" (Tidak dapat diklik).

form

Digunakan untuk menentukkan id element form yang dikaitkan dengan element button.

formaction

Digunakan untuk menentukkan URL yang memproses data form ketika form dikirim. Berlaku untuk attribute type="submit".

formenctype

Menunjukkan form encoded type yang digunakan untuk menentukkan tipe content yang digunakan ketika mengirim form pada server. Berlaku untuk attribute type="submit".

formmethod

Digunakan untuk menentukkan HTTP method yang dipakai oleh browser untuk mengirimkan data form. Berlaku untuk attribute type="submit".

formnovalidate

Digunakan untuk menunjukkan bahwa data form tidak harus di-validasi terlebih dahulu sebelum dikirim. Berlaku untuk attribute type="submit".

formtarget

Digunakan untuk menentukkan target tampilan setelah data form dikirim. Berlaku untuk attribute type="submit".

name

Digunakan untuk menentukkan nama button yang berkaitan dengan data form yang akan dikirim.

type

Digunakan untuk menentukkan tipe (Jenis) dari button.

value

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

HTML
<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.

SOURCE
<!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="https://www.apacara.com/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>



Comments