Cara Membuat Tombol di HTML Menggunakan Tag Button
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!
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.
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>
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.
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.
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>
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.
Sekian dulu dari saya
"Singkat, Semoga Bermanfaat"
Sumber : http://kuy-belajar.blogspot.co.id/2016/07/cara-membuat-tombol-di-html-menggunakan-tag-button.html
Postingan
