cara membuat tombol di form HTML

Jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat textarea di form HTML, di tutorial kali ini kita akan membahas mengenai cara membuat tombol di form HTML, jika di tutorial – tutorial sebelumnya kan kita memang sudah menggunakan tombol untuk melakukan submit pada form, tapi itu hanya sebagian kecil saja form yang ada di HTML, sebenarnya ada 3 jenis tombol di form HTML, apa saja ? yuk mari kita bahas.

Tombol atau button di HTML dibagi menjadi 3 jenis, yaitu submit,reset, dan button, anda dapat mensetnya pada bagian attribute type, baik agar tidak bingung kita langsung coba buat :

semisal kita simpan dengan nama button_form_html.html, lalu kita coba buka di browser :

button_form

terlihat terdapat 3 tombol pada form, tombol submit, tombol reset, dan tombol button.

yang membedakan di skripnya hanyalah value dari type di masing – masing tag button.

lalu apa perbedaannya dari 3 tipe button ini :

  • submit : tombol ini digunakan untuk memproses form, sehingga jika tombol ini di klik, form akan langsung di proses.
  • reset : tombol ini digunakan untuk mereset isian dari form, sehingga kalau tombol reset di klik maka isian form akan kosong
  • button : tombol ini biasanya digunakan sebagai pemicu event di javascript, sehingga type button ini akan maksimal dengan adanya javascript.

 

Attribute disabled

anda dapat menggunakan attribute disabled pada bagian tag <button> untuk menonaktifkan tombol yang anda buat.

contohnya adalah seperti berikut ini :

 

Attribute id dan class

hampir sama dengan inputan lain, tag <button> juga bisa menggunakan attribute id dan class, yang bisa digunakan untuk memanipulasi dengan menggunakan CSS ataupun Javascript, contohnya adalah seperti berikut ini :

Bagaimana mudah kan teman teman, bisa kita simpulkan tombol yang ada di form HTML ada 3 jenis yang memiliki masing – masing fungsi yang berbeda sehingga tidak selalu tombol identik dengan bagian untuk submit inputan form, baik sekian dulu tutorial cara membuat tombol di form HTML, sampai jumpa di tutorial selanjutnya.

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

Leave a Comment

Your email address will not be published.