Cara Membuat HTML button tag – Tag button digunakan untuk membuat tombol yang dapat digunakan oleh pengguna untuk melakukan aksi tertentu pada halaman web.
Tombol ini dapat digunakan untuk mengirim form, menjalankan JavaScript, atau mengarahkan pengguna ke halaman lain.
Sintaks dasar untuk membuat tombol adalah sebagai berikut:
<button>Teks Tombol</button>
Anda juga dapat menambahkan atribut seperti id, class, dan lainnya untuk mengkustomisasi tombol sesuai kebutuhan.
Misalnya, jika Anda ingin menambahkan tombol dengan id “submit-button”, Anda dapat menulis sintaks seperti ini:
<button id=”submit-button”>Kirim</button>
Selain itu, Anda dapat menambahkan aksi pada tombol dengan menambahkan atribut “onclick” yang akan menjalankan sebuah JavaScript ketika tombol diklik. Contohnya:
<button onclick=”alert(‘Tombol diklik!’)”>Klik Saya</button>
Tombol juga dapat digunakan untuk mengirim form dengan menambahkan atribut “type” sebagai “submit”. Contohnya:
<form>
<input type=”text” placeholder=”Masukkan nama Anda”>
<button type=”submit”>Kirim</button>
</form>
Itulah penjelasan singkat tentang tag button HTML yang dapat digunakan untuk membuat tombol interaktif pada halaman web.
Selain itu, tombol juga dapat dikustomisasi dengan CSS agar tampilannya lebih menarik.
Contoh Lengkap HTML button tag
Berikut ini adalah contoh kode lengkap yang menunjukkan penggunaan tag button HTML dengan beberapa variasi yang mungkin digunakan:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Tag Button</title>
</head>
<body>
<!– Contoh tombol sederhana –>
<button>Tombol Sederhana</button>
<!– Contoh tombol dengan atribut ID –>
<button id=”submit-button”>Tombol dengan ID</button>
<!– Contoh tombol dengan aksi JavaScript –>
<button onclick=”alert(‘Tombol diklik!’)”>Tombol dengan Aksi JavaScript</button>
<!– Contoh tombol untuk mengirim form –>
<form>
<input type=”text” placeholder=”Masukkan nama Anda”>
<button type=”submit”>Tombol Kirim Form</button>
</form>
<!– Contoh tombol dengan style CSS –>
<button style=”background-color: blue; color: white; padding: 10px 20px;”>Tombol dengan Style CSS</button>
</body>
</html>
Di sini Anda dapat melihat contoh penggunaan tombol sederhana, tombol dengan atribut ID, tombol dengan aksi JavaScript, tombol untuk mengirim form, dan tombol yang dikustomisasi dengan CSS.
Baca juga : pengertian CSS dan fungsinya
Anda dapat mencoba menjalankan kode ini dengan menyimpan file HTML pada komputer Anda dan membukanya menggunakan browser.
Perlu diingat bahwa Anda dapat mengubah teks, atribut, dan aksi tombol sesuai dengan kebutuhan Anda. Namun pastikan juga untuk mengikuti standar penulisan HTML yang benar agar tidak terjadi error pada kode.