Kuy Belajar - Cara Membuat Tombol di HTML Menggunakan Tag Button. Assalamualaikum sobat semua, kita akan melanjutkan pembahasan kita tentang form di HTML. sebelumnya kita sudah membahas materi tentang Fungsi Input Type File Beserta Cara Penggunaannya. dan pembahasan kita kali ini adalah Cara Membuat Tombol di HTML Menggunakan Tag Button. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!
Sebenarnya untuk membuat tombol, kita pun bisa menggunakan tag input type submit dan input type reset. Fungsinya sama saja, namun dibandingkan dengan tombol yang dibuat menggunakan tag input type submit, penggunaan tag button akan lebih terasa fleksibel dalam penggunaannya.
Penulisan tag button ini pun tidaklah rumit, berikut ini adalah contoh penulisan tag button dalam HTML.
Maka akan menghasilkan file HTML seperti gambar berikut ini.
Dari gambar di atas terlihat sebuah button dengan teks "Teks untuk Button" di dalamnya. Penggunaan tag button pun tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Sobat bisa memprogramnya menggunakan javascript untuk menghasilkan fungsi lain yang akan dijalankan ketika tombol tersebut di klik.
Berikut ini adalah contoh penulisan atribut type di dalam button.
Maka akan menghasilkan file HTML seperti gambar berikut ini.
Dari segi bentuk tampilan kedua button di atas memang tidak ada perbedaan sama sekali, namun mereka memiliki fungsi yang berbeda tentunya.
Jika pada button type=”submit”, maka ketika user meng-klik tombol tersebut, maka HTML akan mengirimkan nilai yang dimasukkan oleh user pada form tersebut untuk diproses (misalkan dengan PHP).
Namun jika pada button type=”reset”, maka jika user meng-klik tombol tersebut, maka efeknya form yang sudah di isikan data oleh user akan otomatis kosong.
Berikut ini adalah contoh penulisan atribut disabled pada tag button dalam HTML.
Maka akan menghasilkan file HTML seperti gambar berikut ini.
Pada gambar di atas terlihat warna button berbeda dengan button default, button pada gambar di atas berwarna abu-abu dan kita tidak dapat meng-kliknya.
Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan diprogram menggunakan javascript untuk mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol yang hanya bisa aktif ketika user telah mengisi seluruh formulir.
Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan javascript
Maka akan menghasilkan file HTML seperti gambar berikut ini.
Keep Coding ya sobat!
Mengenal Tag Button Dalam Form HTML
Fungsi dari Tag button yaitu untuk membuat tombol baik itu di dalam form ataupun diluar form. Tombol yang dihasilkan bisa berupa tombol submit ataupun tombol reset, mungkin sobat bertanya-tanya apa fungsi dari tombol submit dan tombol reset? tenang saja, kita akan membahasnya setelah ini.Sebenarnya untuk membuat tombol, kita pun bisa menggunakan tag input type submit dan input type reset. Fungsinya sama saja, namun dibandingkan dengan tombol yang dibuat menggunakan tag input type submit, penggunaan tag button akan lebih terasa fleksibel dalam penggunaannya.
Penulisan tag button ini pun tidaklah rumit, berikut ini adalah contoh penulisan tag button dalam HTML.
<html><title>Kuy Belajar Tag Button</title>
</head>
<body><button>Teks untuk Button</button></body></html>
Dari gambar di atas terlihat sebuah button dengan teks "Teks untuk Button" di dalamnya. Penggunaan tag button pun tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Sobat bisa memprogramnya menggunakan javascript untuk menghasilkan fungsi lain yang akan dijalankan ketika tombol tersebut di klik.
Mengenal Atribut Type Dalam Button
Seandainya sobat menggunakan tag button ini di dalam sebuah form, maka sobat bisa menaambahkan sebuah atribut type untuk mengubah fungsi dari button yang sobat buat. Nilai yang sobat bisa masukkan untuk atribut type ini yaitu reset dan submit.Berikut ini adalah contoh penulisan atribut type di dalam button.
<html><title>Kuy Belajar Tag Button</title>
</head>
<body><form><button type="submit">Button Type Submit</button><button type="reset">Button Type Reset</button></form></body></html>
Dari segi bentuk tampilan kedua button di atas memang tidak ada perbedaan sama sekali, namun mereka memiliki fungsi yang berbeda tentunya.
Jika pada button type=”submit”, maka ketika user meng-klik tombol tersebut, maka HTML akan mengirimkan nilai yang dimasukkan oleh user pada form tersebut untuk diproses (misalkan dengan PHP).
Namun jika pada button type=”reset”, maka jika user meng-klik tombol tersebut, maka efeknya form yang sudah di isikan data oleh user akan otomatis kosong.
Mengenal Atribut Disabled Pada Button
Atribut disabled merupakan salah satu atribut penting di dalam tag button, atribut ini di gunakan untuk mengatur apakah tombol yang kita buat bisa digunakan oleh user atau tidak. Atribut ini hanya memiliki 1 nilai, yaitu disabled.Berikut ini adalah contoh penulisan atribut disabled pada tag button dalam HTML.
<html><title>Kuy Belajar Tag Button</title>
</head>
<body><button disabled>Button ini di Disabled</button></body></html>
Pada gambar di atas terlihat warna button berbeda dengan button default, button pada gambar di atas berwarna abu-abu dan kita tidak dapat meng-kliknya.
Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan diprogram menggunakan javascript untuk mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol yang hanya bisa aktif ketika user telah mengisi seluruh formulir.
Mengenal Atribut Id dan Class Dalam Tag Button
Selain atribut type, dan disabled, HTML juga menyediakan atribut juga menyediakan atribut id dan class. Kita bisa menggunakan atribut seperti id dan class dalam tag button. Berikut ini adalah contoh penulisan tag id dan class dalam input button.
<html><title>Kuy Belajar Tag Button</title>
</head>
<body><button id="nama_id" class="nama_class">Teks untuk Button</button></body></html>
dan CSS.
Contoh Penggunaan tag input button di Dalam Form HTML
Sebagai akhir dari materi Cara Membuat Tombol di HTML Menggunakan Tag Button ini, kita akan menggabungkan semua atribut yang sudah kita pelajari di atas. Berikut ini adalah contoh penulisan tag button dalam form HTML.<html><title>Kuy Belajar Tag Button</title>
</head>
<body><button>Button Normal</button><br><button disabled>Button Disabled</button><br><h4>Formulir isian duniailkom:</h4><form action="" method="get">Nama : <input type="text" name="nama_nya"/><button type="submit">Kirim Data</button><button type="reset">Reset Form</button></form></body></html>
Sobat akan menjumpai bahwa penggunaan tag button di dalam HTML tidak hanya terbatas di dalam form. Dalam proses desain website, tag button juga sering diprogram dengan menggunakan javascript.
Saya rasa itu lah pembahasan kita tentang Cara Membuat Tombol di HTML Menggunakan Tag Button. kita sudah mempelajari fungsi berserta contoh nya masing-masing.
Sekian dulu dari saya "Singkat, Semoga Bermanfaat"
Kuy ke materi selanjutnya : Fungsi Tag Label dan Cara Penggunaannya