Cara menggunakan fungsi button 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>
 Table of Contents Show
 Mengenal Atribut Type Dalam Button
Mengenal Atribut Disabled Pada Button
Mengenal Atribut Id dan Class Dalam Tag Button
Contoh Penggunaan tag input button di Dalam Form HTML
Jelaskan apa yang dimaksud dengan atribut HTML?
Berfungsi apakah tombol button pada form?
Apa fungsi button pada HTML?
Type input apa yang digunakan untuk membuat tombol kirim?
 


<title>Kuy Belajar Tag Button</title>




</head>







<body>

       
<button>Teks untuk Button</button>

</body>





</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.

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>

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.

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>

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.

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>

Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan javascript

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>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

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.

Jelaskan apa yang dimaksud dengan atribut HTML?

Atribut HTML adalah teks khusus yang digunakan di dalam tag HTML pembuka untuk mengontrol perilaku elemen. Atribut terdiri dari dua bagian, yaitu nama dan nilai. Atribut ditulis mulai dari nama, diikuti dengan tanda sama dengan ( = ), kemudian nilai atribut dibungkus dengan tanda petik, nama="nilai" .

Berfungsi apakah tombol button pada form?

Fungsi Tag Button dalam pembuatan Form HTML Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.

Apa fungsi button pada HTML?

HTML elemen tag <button> merupakan tag pada HTML yang digunakan untuk menciptakan sebuah tombol yang dapat diklik. Tombol (button) merupakan hal yang lazim digunakan saat mengirimkan formulir untuk dikirimkan menuju server.

Type input apa yang digunakan untuk membuat tombol kirim?

Input type submit Type submit digunakan untuk membuat tombol kirim. Ini adalah tipe input yang wajib digunakan saat membuat sebuah form. Jika tombol ini di-klik user maka form akan diproses oleh file yang sudah ditentukan di atribut action pada tag <form>.