Cara Membuat Button di HTML dengan Mudah

Kembali lagi sahabat programmer, kali ini saya akan share mengenai cara membuat button di html. Button adalah salah satu komponen penting saat kita membuat website dengan html. Komponen ini biasanya digunakan untuk submit atau mereset isian pada form yang diinput oleh user.

Komponen button dapat kita buat dengan menggunakan tag <button> ataupun tag <input> dengan atribut type submit ataupun reset. Namun penggunaan button dengan menggunakan tag <button> mempunyai fleksibilitas lebih karena dapat kita sandingkan dengan fungsi javascript.

Penggunaan Button Di HTML

Komponen button dapat kita gunakan didalam form maupun diluar form. Komponen button dapat dibuat dengan menggunakan tag <input> maupun tag <button>.

Menggunakan Tag Input

<input type="submit" name="Login"/> 
<input type="reset" name="Reset"/>

Menggunakan Tag Button

<button>Login</login>

Penggunaan Atribut

Terdapat beberapa atribut yang sering digunakan pada komponen button. Simak penjelasannya dibawah ini:

Atribut Type

Terdapat dua nilai untuk atribut type pada tag input dan tag button, yang pertama adalah submit yaitu jenis button untuk mensubmit nilai pada form yang nantinya akan di proses ke server (jika menggunakan php). Yang kedua adalah reset yaitu fungsinya untuk mereset kembali inputan user pada suatu form sehingga nilai inputan akan di kosongkan kembali.

Contoh:

<form>
<input type="text" name="nama"/> <br>
<input type="submit" name="Login"/> 
<input type="reset" name="Reset"/>
</form>

Atribut Disabled

Atribut disabled juga penting dan sering digunakan. Fungsinya untuk mengatur apakah button tersebut dapat di klik/ digunakan oleh pengguna atau tidak. Penggunaan atribut ini dapat langsung di buat didalam tag button atau input type submit/reset tanpa memiliki nilai (value).

Contoh:

<button disabled>Login</login>

Terlihat Button yang diberi atribut disabled akan berwarna pucat jika dibandingkankan dengan button yang tidak di disabled. dan ketika kursor mouse kita diarahkan ke button tersebut, maka tidak dapat diklik.

Atribut Class dan ID

Kedua atribut ini akan di gunakan saat kita membuat website dengan html dan javascript. Atribut class dan id digunakan sebagai penanda pada setiap elemen. Dalam hal ini termasuk elemen button. ketika kita ingin membuat event ketika user mengklik tombol maka event akan dijalankan berdasarkan penanda pada atribut class maupun id.

Contoh:

<button class="tombol_login">Login</login>
<button id="tombol_login">Login</login>

Untuk pemanggilan elemen menggunakan tanda . untuk class dan # untuk atribut id.

Demikian artikel singkat mengenai cara membuat button di html. Semoga bermanfaat buat teman-teman pemula yang sedang belajar membuat website sederhana. Silahkan baca artikel lainnya di blog ini.