Tutorial Form HTML Part 3: Fungsi dan Cara Penggunaan Tag Button HTML

Jika dalam tutorial sebelumnya kita mempelajari tentang tag fieldset dan tag legend, dalam tutorial kali ini kita akan mempelajari tag button yang digunakan untuk membuat tombol di dalam HTML. Tag button ini bisa digunakan di dalam form, maupun di luar form.


Fungsi Tag Button dalam pembuatan Form HTML

Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), kita telah menggunakan tag input dengan type="submit" untuk membuat tombol di dalam form HTML, namun HTML menyediakan tag khusus yang memiliki fungsi sama, yakni tag button.

Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type="submit", tag button menawarkan fleksibilitas yang lebih.


Cara Penggunaan Tag Button HTML

Untuk menggunakan tag button, kita cukup menuliskannya dengan struktur dasar sebagai berikut:

<button>text untuk tombol</button>

Tag button juga tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Anda bisa memprogramnya menggunakan javascript untuk membuat fungsi lain yang akan dijalankan ketika tombol tersebut di klik.


Atribut type: Merubah Fungsi Tombol tag button

Jika digunakan di dalam form, kita dapat menambahkan sebuah atribut type untuk merubah fungsi tombol tersebut. Nilai yang bisa digunakan untuk atribut ini adalah reset, submit, dan button. Contoh penulisannya adalah:

<button type="reset">Text untuk tombol</button>

Jika menuliskan type="submit", maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalkan dengan PHP), namun jika type="reset", maka jika tombol tersebut di klik, efeknya akan mengosongkan isian form. Type="button" tidak akan berefek apa-apa kedalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis : <button type="button">


Atribut disabled: Menonaktifkan tag button

Salah satu atribut penting untuk tag button ini adalah atribut disabled. Atribut ini digunakan untuk mengontrol apakah tombol tersebut bisa digunakan oleh user atau tidak. Atribut ini hanya memiliki 1 nilai, yaitu disabled, sehingga ditulis dengan disabled="disabled".  Cara penulisannya adalah sebagai berikut:

<button disabled="disabled">Text untuk tombol</button>

Jika anda menjalankan contoh tersebut di dalam HTML, tombol akan berwarna abu-abu dan tidak bisa di klik oleh user.

Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan diprogram menggunakan javascript untuk mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol yang hanya bisa aktif ketika user telah mengisi seluruh formulir.


Atribut id dan class: CSS dan Javascript

Selain atribut type dan disabled, kita bisa menggunakan atribut seperti id dan class dalam tag button. Atribut id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.


Contoh penggunaan tag button dalam HTML

Sebagai penutup, berikut adalah contoh kode HTML dalam penulisan dan penggunaan tag button:

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Button HTML</title>
</head>

<body>

   <button>Silahkan Klik Saya</button>
   <br />

   <button disabled="disabled">Tombol ini tidak bisa di-klik</button>
   <br />

   <h4>Formulir isian duniailkom:</h4>

   <form action=" formulir.html" method="get">

   Nama : <input type="text" name="nama_user" id="nama_user"/>

   <button type="submit">Mulai Proses!</button>
   <button type="reset">Reset Form</button>

   </form>

</body>
</html>

Tutorial Pembuatan Form HTML - Contoh Cara Penggunaan Tag ButtonAnda akan menjumpai bahwa penggunaan tag button di dalam HTML tidak hanya terbatas di dalam form. Dalam proses desain website, tag button juga sering diprogram dengan menggunakan javascript.


Dalam tutorial form HTML selanjutnya, kita akan membahas tentang cara dan fungsi tag input type text dalam HTML. Objek form ini banyak digunakan dalam form html.

35 Comments

  1. fakhri
    22 Jun 15
  2. Anonymous
    25 Jun 15
    • Andre
      26 Jun 15
  3. marco
    10 Aug 15
  4. surya
    30 Nov 15
    • Andre
      30 Nov 15
  5. Jack
    09 Jun 16
    • Andre
      09 Jun 16
  6. amri
    13 Jun 16
  7. Santun Rohmanto
    13 Sep 16
    • Andre
      14 Sep 16
  8. Budianto Bangun
    24 Oct 16
    • Andre
      25 Oct 16
  9. anon
    18 Feb 17
    • Andre
      19 Feb 17
  10. Kenji
    12 Jun 17
  11. rina
    24 Jul 17
    • Andre
      25 Jul 17
  12. agus
    25 Mar 18
    • Andre
      26 Mar 18
  13. Dayu Hermawan
    03 Apr 18
    • Andre
      05 Apr 18
  14. Dayu Hermawan
    03 Apr 18
    • Andre
      04 Aug 18
  15. Gabriel Arya
    15 Sep 18
    • Andre
      17 Sep 18
  16. Anonymous
    23 Oct 18
    • Andre
      24 Oct 18
  17. Wahid Fadholi
    06 Apr 20
  18. ikbal
    12 May 20
    • Andre
      13 May 20
  19. shitass
    29 Dec 20
    • Andre
      30 Dec 20

Add Comment

Leave a Reply to Andre Cancel reply