cloud-hosting-terbaik-indonesia

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

Posted on

Apabila pada panduan sebelumnya kita mempelajari mengenai tag fieldset dan tag legend, pada panduan kali ini kita akan mempelajari tag button yang digunakan bagi membangun tombol di pada HTML. Tag button ini dapat digunakan di pada form, maupun di luar form.


Manfaat Tag Button pada perancangan Form HTML

Di pada panduan Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), kita telah menggunakan tag input dengan type=”submit” bagi membangun tombol di pada form HTML, namun HTML menyediakan tag khusus yang mempunyai kegunaan sama, yakni tag button.

Tag button berfungsi bagi membangun tombol bagus itu di pada form, maupun diluar form. Dibandingi dengan tombol yang dikerjakan dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.


Cara Pemakaian Tag Button HTML

Bagi menggunakan tag button, kita lumayan menuliskannya dengan struktur mendasar selaku berikut:

Tag button pun tak mesti berada di pada form, dan ini memberikan fleksibilitas yang tinggi. Sahabat dapat memprogramnya menggunakan javascript bagi membangun kegunaan lain yang akan dijalankan ketika tombol tersebut di klik.


Atribut type: Merubah Manfaat Tombol tag button

Apabila digunakan di pada form, kita dapat menambahkan sebuah atribut type bagi merubah kegunaan tombol tersebut. Nilai yang dapat digunakan bagi atribut ini yaitu reset, submit, dan button. Contoh penulisannya yaitu:

Apabila menuliskan type=”submit”, karenanya ketika tombol di klik, HTML akan mengirimkan nilainya bagi diproses (misalkan dengan PHP), namun sekiranya type=”reset”, karenanya sekiranya tombol tersebut di klik, efeknya akan mengosongkan isian form. Type=”button” tak akan berefek apa-apa kedalam kegunaan tombol, bahkan mungkin akan sedikit membingungkan menulis : <button type=”button”>


Atribut disabled: Menonaktifkan tag button

Diantara atribut urgen bagi tag button ini yaitu atribut disabled. Atribut ini digunakan bagi mengendalikan apakah tombol tersebut dapat digunakan oleh user atau tak. Atribut ini hanya mempunyai 1 nilai, yaitu disabled, sehingga ditulis dengan disabled=”disabled”.  Cara penulisannya yaitu selaku berikut:

Apabila sahabat menjalankan contoh tersebut di pada HTML, tombol akan berwarna abu-abu dan tak dapat di klik oleh user.

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


Atribut id dan class: CSS dan Javascript

Selain atribut type dan disabled, kita dapat menggunakan atribut seperti id dan class pada tag button. Atribut id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Contoh pemakaian tag button pada HTML

Selaku penutup, berikut yaitu contoh kode HTML pada penulisan dan pemakaian tag button:

 Sahabat akan menjumpai bahwa penggunaan tag button di dalam HTML tak hanya terbatas di pada form. Pada proses desain situs, tag button pun sering diprogram dengan menggunakan javascript.


Pada panduan form HTML berikutnya, kita akan membahas mengenai cara dan fungsi tag input type text pada HTML. Objek form ini banyak digunakan pada form html.


Sumber https://www.duniailkom.com/