Belajar HTML part 14 membuat button di html

Belajar membuat button di html merupakan salah satu dasar yang wajib di ketahui oleh seorang web developer, karena bukan tidak mungkin sebuah website tidak memiliki komponen button/tombol didalamnya.

Button diperlukan oleh sebuah web untuk melakukan aksi, dalam hal ini perubahan apa yang akan terjadi atau tindakan seperti apa yang akan dilakukan oleh sebuah web nantinya ketika kita mengklik sebuah button di halaman website.

Pada sebuah website biasanya memiliki sebuah atau beberapa form didalamnya, dan button disini bertugas untuk mengirim data dari form saat kita mengklik button pada form tersebut.

Lalu bagaimana membuat button pada html?

Cara membuat button dengan html

Disini akan saya jelaskan 2 hal yang biasanya digunakan untuk membuat tombol dengan html, diantaranya:

1. Membuat button dengan tag input

Pada cara pertama ini, tag input merupakan salah satu cara yang sering kali orang lain gunakan dalam membuat button dengan html. 

Atribut yang biasanya digunakan ialah atribut type dengan nilai button (untuk button biasa), submit (untuk button yang dapat mengirim data form) dan reset (untuk mereset/mengosongkan semua data inputan di form).

Berikut contoh kodenya:

<!-- contoh button biasa-->
<input type="button" value="Tombol" />

<!-- contoh button kirim dengan tipe submit-->
<input type="sumit" value="Kirim" />

<!-- contoh button batal dengan tipe reset-->
<input type="reset" value="Batal" />

Dari contoh kode diatas atribut value pada tag input bertugas untuk memunculkan nama button nantinya sesuai yang dituliskan didalam atribut value tersebut.

Cara diatas dimana membuat button dengan tag input sebetulnya merupakan cara lama bagi seorang web developer membangun sebuah button dengan html. Mengapa demikian? Karena sejatinya tag input secara kegunaan sebenarnya tidak digunakan untuk membuat elemen button dan memang hanya digunakan untuk membuat inputan pada form

2. Membuat button dengan tag button

Cara kedua dalam membuat tombol dengan html adalah kita bisa menggunakan tag button html.

Tag ini merupakan tag khusus untuk membuat tombol atau button tanpa kita harus menggunakan tag input pada html.

Catatan! Tag button merupakan tag yang direkomendasikan dalam membuat button dengan html, karena tag ini lebih mendefinisikan kegunaan serta penamaan tag yang sesuai untuk membuat sebuah button pada html

Penting untuk diketahui tag button sebenarnya telah ada sejak html 5 rilis, jadi tag ini muncul sebagai pengganti tag input yang selama ini digunakan untuk membangun sebuah tombol pada html.

Berikut contoh kode daripada penggunaan tag button ini.

<!--contoh button biasa-->
<button type="button">Tombol</button>

<!--contoh button dengan atribut type submit-->
<button type="submit">Kirim</button>

<!--contoh button dengan atribut tipe reset-->
<button type="reset">Batal</button>

Perbedaan tag input dan tag button html

Disini akan saya jelaskan perbedaan dari 2 tag ini(tag input dan tag button) dalam hal membangun elemen button html.

Perbedaan yang akan saya jelaskan ialah dilihat dari 2 sisi diantaranya secara struktur kode dan secara fungsionalitas/kegunaan.

1. Perbedaan secara struktur kode

Dapat dilihat dengan jelas perbedaan dari kedua tag pembentuk button ini.

Tag input.

<input type="button" value="Tombol"/>

Sedangkan

Tag button

<button type="button">Tombol</button>

ya perbedaannya ialah

1. Tag input tak memiliki tag penutup sedangkan tag button memiliki tag penutup.
2. Tag input dalam penamaan tombol menggunakan atribut value sedangkan tag button tak menggunakan atribut value.

2. Perbedaan secara fungsionalitas/kegunaan

Dari sisi fungsionalitas/kegunaan kita tahu dari kedua tag ini(input dan button) sama-sama dapat membangun elemen button html.

Tetapi secara hakikat atau kodrat dari suatu tag menjelaskan untuk fungsi apa tag itu dibuat. Seperti pada tag input.

Tag input secara kegunaan memang dibuat untuk mengelola inputan user jadi sama sekali tidak dibuat untuk membangun elemen button.

Berbeda dengan tag button. Tag ini(tag button html) secara fungsi memang dibuat untuk dapat membangun sebuah button dengan html pada halaman web.

semoga dapat dipahami dan dimengerti penjelasan kita kali ini mengenai bagaimana membuat button dengan html. Semoga bermanfaat dan tetap terus belajar ya.

📖 Temukan artikel belajar html dasar lainnya di Tutorial Belajar Lengkap HTML

LOGIN

Login before opening the page!

Login

Back to homepage