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" memiliki fungsi yang sama dengan tag button yaitu mengirimkan data form untuk diproses oleh PHP atau bahasa pemrograman lainnya.

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

Penulisan Tag Button Dalam Pembuatan Form HTML

Untuk menggunakan tag button, kita cukup menuliskan kode seperti dibawah ini :

<button>Tombol</button>

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

Tag button memiliki 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 menggunakan tag button didalam form, maka kita bisa menambahkan atribut type untuk merubah fungsi dari tag tersebut. Nilai yang bisa digunakan untuk atribut type yaitu submit, reset dan button.

Berikut ini contoh 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 kita klik tombol tersebut, maka akan mengirimkan data form tersebut untuk diproses oleh PHP, sebenarnya tanpa menambahkan atribut type="submit" di tag button maka secara default tag button akan mengirimkan data form tersebut. Namun agar 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 jika kita klik tombol tersebut akan mengosongkan atau mengulangi isian form yang sudah kita isi.

Berikut ini contoh 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 jika kita tekan tombol tersebut tidak akan berfungsi apa-apa didalam form, bahkan akan membingungkan Anda saat menuliskan <button type="button">.

Penggunaan dan Penulisan Tag Button Dengan Atribut Disabled

Atribut disabled digunakan agar tombol tersebut tidak bisa diklik oleh pengguna atau pengunjung, atribut ini hanya memiliki 1 nilai, yaitu disabled sehingga ditulis dengan disabled="disabled".

Berikut ini contoh 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 bisa di klik, kita harus memprogramnya dengan JavaScript. Misalnya kita memprogram tombol tersebut agar tidak bisa di klik saat pengunjung belum mengisi seluruh form dan jika seluruh form tersebut sudah di isi maka tombol tersebut baru bisa 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 membuatkan contoh 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>

Pada artikel selanjutnya kita akan membahas Penggunaan dan Penulisan Tag Input Dengan Atribut Text Dalam Pembuatan Form HTML.

Penggunaan dan Penulisan Tag Button Dalam Form HTML

Penggunaan Tag Button Dalam Pembuatan Form HTML

Penulisan Tag Button Dalam Pembuatan Form HTML

Penggunaan dan Penulisan Tag Button Dengan Atribut Type

Penggunaan dan Penulisan Tag Button Dengan Atribut Disabled

0 Response to "Penggunaan dan Penulisan Tag Button Dalam Form HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel