Belajar HTML Part 28 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.
Video Tutorial Belajar HTML – Membuat Button di Form HTML
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <button type="submit">Tombol Submit</button> <button type="reset">Tombol Reset</button> <button type="button">Tombol Button</button> </form> </body> </html> |
semisal kita simpan dengan nama button_form_html.html, lalu kita coba buka di browser :
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 :
|
1 |
<button type="submit" disabled="disabled">Kirim</button> |
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 :
|
1 |
<button type="submit" id='abc' class='abc' >Kirim</button> |
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.
[stextbox id=”info”] 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[/stextbox]
good