Belajar HTML Part 28 Cara Membuat Tombol di Form HTML

Posted on Posted in Tutorial 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.

 

lalu apa perbedaanya jika kita menggunakan tombol type submit dengan menggunakan input type=”submit”

nah anda dapat menggunakan kedua cara pembuatan tombol diatas, yang membedakan jika tombol yang menggunakan cara pertama anda bisa mengirimkan nilai dengan memberikan nilai pada bagian name dan value hal ini bisa anda gunakan untuk melakukan pengecekan apakah benar ada tombol yang diklik dengan menggunakan nilai tombol yang dikirimkan,

untuk tombol dengan cara kedua itu hanya digunakan sebagai pemicu proses dari formnya.

 

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 Reply

Your email address will not be published. Required fields are marked *