Cara Pemakaian dan Fungsi Tag Button HTML

belajar HTML dan CSS untuk pemula

Bila dalam tutorial sebelumnya kita mempelajari mengenai tag fieldset dan tag legend, dalam tutorial saat ini kita akan mempelajari tag button yang dipakai untuk membuat tombol di dalam HTML. Tag button ini dapat dipakai di dalam form, ataupun di luar form.

Fungsi Tag Button dalam pembuatan Form HTML

Di dalam tutorial Cara Membuat Form di HTML dengan tag form, kita sudah memakai tag input dengan type=”submit” untuk membuat tombol di dalam form HTML, tetapi HTML menyediakan tag khusus yang mempunyai fungsi sama, yaitu tag button.

Tag button berguna untuk membuat tombol baik itu di dalam form, ataupun diluar form. Dibandingkan dengan tombol yang dibikin dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.

Cara Pemakaian Tag Button HTML

Untuk memakai tag button, kita cukup menuliskannya dengan struktur dasar sebagai berikut:

<button>text untuk tombol</button>

Tag button juga tidak mesti berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Kamu bisa memprogramnya memakai javascript untuk membuat fungsi lain yang akan dijalankan saat tombol itu di klik.

Atribut type

Bila dipakai di dalam form, kita bisa menambahkan sebuah atribut type untuk mengubah fungsi tombol itu. Nilai yang dapat dipakai untuk atribut ini merupakan reset, submit, dan button. Contoh penulisannya ialah:

<button type=”reset”>Text untuk tombol</button>

Bila menuliskan type=”submit”, maka saat tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalnya dengan PHP), tetapi bila type=”reset”, maka bila tombol itu di klik, efeknya akan mengosongkan isian form. Type=”button” tak akan berefek apa-apa kedalam fungsi tombol, bahkan barangkali akan sedikit membingungkan menulis : <button type=”button”>

Atribut disabled

Salah satu atribut penting untuk tag button ini merupakan atribut disabled. Atribut ini dipakai untuk mengendalikan apakah tombol itu bisa dipakai oleh user atau tidak. Atribut ini cuma mempunyai 1 nilai, yaitu disabled, sehingga ditulis dengan disabled=”disabled”.  Cara penulisannya yaitu sebagai berikut:

<button disabled="disabled">Text untuk tombol</button>

Bila kamu menjalankan contoh itu di dalam HTML, tombol akan berwarna abu-abu dan tidak boleh di klik oleh user.

Atribut disabled ini dapat diterapkan kepada hampir semua objek form, dan pada umumnya akan diprogram memakai javascript untuk mengaktifkan tombol itu. Misalnya kita memprogram sebuah tombol yang cuma bisa aktif saat user sudah mengisi semua formulir.

Atribut id dan class

Selain atribut type dan disabled, kita dapat memakai atribut seperti id dan class dalam tag button. Atribut id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Contoh pemakaian tag button dalam HTML

Sebagai penutup, berikut ialah contoh kode HTML dalam penulisan dan pemakaian tag button:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Button HTML</title>
</head>
<body>
<button>Silahkan Klik Saya</button>
<br />
<button disabled="disabled">Tombol ini tidak dapat di-klik</button>
<br />
<h4>Formulir isian infanthree:</h4>
<form action=" formulir.html" method="get">
Nama : <input type="text" name="nama_user" id="nama_user"/>
<button type="submit">Mulai Proses!</button>
<button type="reset">Reset Form</button>
</form>
</body>
</html>

Kamu akan menjumpai bahwa pemakaian tag button di dalam HTML tidak cuma terbatas di dalam form. Pada proses desain website, tag button juga sering diprogram dengan memakai javascript.

Dalam tutorial form HTML berikutnya, kita akan membicarakan mengenai cara dan fungsi tag input type text dalam HTML. Objek form ini banyak dipakai dalam form html.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *