Penggunaan Dan Penulisan Tag Button Dalam Form Html

Jika pada artikel sebelumnya kita telah membahas Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Pembutan Form HTML, pada artikel kali ini kita akan membahas Penggunaan dan Penulisan Tag Button Dalam Pembuatan Form HTML.

Penggunaan Tag Button Dalam Pembuatan Form HTML

Jika dilihat dari segi kegunaan atau fungsi tag input dengan atribut type="submit" mempunyai fungsi yang sama dengan tag button yaitu mengirimkan data form untuk diproses oleh PHP atau bahasa pemrograman lainnya.

Namun tag button menunjukkan fleksibilitas yang lebih dibandingkan dengan tag <input type="submit"/>, yaitu tag button dapat dipakai didalam form maupun diluar form sedangkan tag <input type="submit"/> hanya dapat dipakai didalam form saja.

Penulisan Tag Button Dalam Pembuatan Form HTML

Untuk memakai tag button, kita cukup menuliskan isyarat ibarat dibawah ini :

<button>Tombol</button>

Jika kita jalankan di browser kemudian kita klik "Tombol" tersebut, maka tidak akan terjadi apa-apa itu alasannya yakni kita belum memprogramnya dengan JavaScript. Namun kalau tag button tersebut berada didalam form maka kalau kita klik "Tombol" tersebut, maka akan mengirimkan data form untuk diproses oleh PHP atau bahasa pemrograman lainnya.

Tag button mempunyai beberapa atribut, yaitu atribut type dan disabled. Berikut ini Saya akan membahas penggunaan dan penulisan atribut yang Saya sebutkan tadi pada tag button.

Penggunaan dan Penulisan Tag Button Dengan Atribut Type

Jika kita memakai tag button didalam form, maka kita dapat menambahkan atribut type untuk merubah fungsi dari tag tersebut. Nilai yang dapat dipakai untuk atribut type yaitu submit, reset dan button.

Berikut ini referensi penulisan atribut type="submit" didalam tag button :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <h2>Apakah hobi Anda ?</h2> <form action="hobi.php" method="post">     <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>     <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>     <input type="checkbox" name="membaca" id="membaca"/>Membaca<br/>     <button type="submit">Kirim</button> </form> </body> </html>

Jika pada artikel sebelumnya kita telah membahas Penggunaan dan Penulisan Tag Button Dalam Form HTML

Jika kita klik tombol tersebut, maka akan mengirimkan data form tersebut untuk diproses oleh PHP, bekerjsama tanpa menambahkan atribut type="submit" di tag button maka secara default tag button akan mengirimkan data form tersebut. Namun biar membedakan tag button didalam form dan diluar form, maka kita harus menambahkan tag button yang berada didalam form dengan atribut type="submit".

Jika kita ganti atribut type="submit" dengan atribut type="reset", maka kalau kita klik tombol tersebut akan mengosongkan atau mengulangi isian form yang sudah kita isi.

Berikut ini referensi penulisan atribut type="reset" didalam tag button :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <h2>Apakah hobi Anda ?</h2> <form action="hobi.php" method="post">     <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>     <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>     <input type="checkbox" name="membaca" id="membaca"/>Membaca<br/>     <button type="reset">Ulang</button> </form> </body> </html>

Jika kita ganti atribut type="reset" dengan atribut type="button" maka kalau kita tekan tombol tersebut tidak akan berfungsi apa-apa didalam form, bahkan akan membingungkan Anda dikala menuliskan <button type="button">.

Penggunaan dan Penulisan Tag Button Dengan Atribut Disabled

Atribut disabled dipakai biar tombol tersebut tidak dapat diklik oleh pengguna atau pengunjung, atribut ini hanya mempunyai 1 nilai, yaitu disabled sehingga ditulis dengan disabled="disabled".

Berikut ini referensi penulisan atribut disabled didalam tag button :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <h2>Apakah hobi Anda ?</h2> <form action="hobi.php" method="post">     <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>     <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>     <input type="checkbox" name="membaca" id="membaca"/>Membaca<br/>     <button disabled="disabled">Kirim</button> </form> </body> </html>

Agar tombol tersebut dapat di klik, kita harus memprogramnya dengan JavaScript. Misalnya kita memprogram tombol tersebut biar tidak dapat di klik dikala pengunjung belum mengisi seluruh form dan kalau seluruh form tersebut sudah di isi maka tombol tersebut gres dapat di klik.

Sebenarnya atribut untuk tag button masih ada yang lain, tapi pada artikel kali ini Saya hanya membahas atribut type dan disabled saja, untuk atribut yang lain nanti akan Saya bahas pada artikel tersendiri.

Sebagai rangkuman untuk penulisan tag input type button beserta atributnya, Saya sudah menyebarkan referensi kode form HTML-nya :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <h2>Apakah hobi Anda ?</h2> <form action="hobi.php" method="post">     <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>     <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>     <input type="checkbox" name="membaca" id="membaca"/>Membaca<br/>     <button type="submit">Kirim</button>     <button type="reset">Ulang</button> </form> </body> </html>