Tanda <button> HTML

Definisi dan penggunaan

<button> Tag yang menentukan tombol yang dapat diklik.

Dalam <button> Dalam elemen, Anda dapat menempatkan teks (dan seperti tag <i>, <b>, <strong>, <br>, <img> dll). Ini adalah <input> Tombol yang dibuat elemen yang tidak dapat lakukan!

Petunjuk:Selalu tentukan <button> elemen yang ditentukan Atribut typeuntuk memberitahu browser tentang tipe tombol yang digunakan.

Petunjuk:Anda dapat menambahkan gaya ke tombol dengan mudah menggunakan CSS! Lihat contoh di bawah ini atau kunjungi Tutorial Tombol CSS.

Penjelasan detil

<button> Kontrol dengan <input type="button"> menyediakan fitur yang lebih kuat dan konten yang lebih kaya.<button> bandingkan </button> Semua konten di antara tag adalah konten tombol, termasuk konten teks yang diizinkan, seperti teks atau konten multimedia. Contohnya, kita dapat menyertakan gambar dan teks yang relevan di tombol, untuk menciptakan markering gambar yang menarik di tombol.

Elemen yang dilarang hanya peta gambar, karena aksi yang sensitif mouse dan keyboard akan mengganggu perilaku tombol formulir.

Selalu tentukan tombol untuk Atribut type. Tipe default Internet Explorer adalah "button"sedangkan nilai default di browser lainnya (termasuk spesifikasi W3C) adalah "submit".

Lihat pula:

Panduan Referensi HTML DOM:Objek Button

Tutorial CSS:Atur gaya tombol

Contoh

Tandai tombol yang dapat di klik seperti ini:

<button type="button">Klik saya!</button>

Coba sendiri

Petunjuk:Lebih banyak contoh disediakan di bawah halaman.

Atribut

Atribut Nilai Deskripsi
autofocus autofocus atur tombol harus mendapatkan fokus otomatis saat halaman dimuat.
disabled disabled atur tombol harus dinonaktifkan.
form form_id atur tombol milik formulir mana.
formaction URL

atur tempat formulir data akan dikirim saat formulir disubmit.

hanya berlaku untuk type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

atur bagaimana formulir data harus dienkripsi sebelum dikirim ke server.

hanya berlaku untuk type="submit".
formmethod
  • get
  • post

atur bagaimana formulir data harus dikirim (gunakan metode HTTP mana).

hanya berlaku untuk type="submit".
formnovalidate formnovalidate

atur supaya formulir data tidak harus diverifikasi saat disubmit.

hanya berlaku untuk type="submit".
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • Nama kerangka

atur tempat yang harus ditampilkan setelah formulir disubmit.

hanya berlaku untuk type="submit".
name Nama atur nama tombol.
popovertarget element_id atur elemen pop-up yang akan dipanggil.
popovertargetaction
  • hide
  • show
  • toggle
 Tentukan tindakan yang dilakukan elemen bingkai pop-up saat tombol diklik.
type
  • button
  • reset
  • submit
 Tentukan jenis tombol.
value Teks Tentukan nilai awal tombol.

Atribut global

<button> Tanda mendukung Atribut global HTML.

Atribut acara

<button> Tanda mendukung Atribut acara HTML.

Pengaturan CSS standar

Tak ada.

Beberapa contoh lain

Contoh 2

Gunakan CSS untuk menata gaya tombol:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  batas: tak ada;
  warna: putih;
  padding: 15px 32px;
  text-align: tengah;
  dekorasi tulisan: tak ada;
  tampil: blok;
  ukuran tulisan: 16px;
  margin: 4px 2px;
  kursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Hijau */
.button2 {background-color: #008CBA;} /* Biru */
</style>
</head>
<body>
<button class="button button1">Hijau</button>
<button class="button button2">Biru</button>
</body>
</html>

Coba sendiri

Contoh 2

Gunakan CSS untuk menata gaya tombol (dengan efek hover):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  batas: tak ada;
  warna: putih;
  padding: 16px 32px;
  text-align: tengah;
  dekorasi tulisan: tak ada;
  tampil: blok;
  ukuran tulisan: 16px;
  margin: 4px 2px;
  durasi transisi: 0.4s;
  kursor: pointer;
}
.button1 {
  background-color: putih;
  warna: hitam;
  batas: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  warna: putih;
}
.button2 {
  background-color: putih;
  warna: hitam;
  batas: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  warna: putih;
}
</style>
</head>
<body>
<button class="button button1">Hijau</button>
<button class="button button2">Biru</button>
</body>
</html>

Coba sendiri

Perangkat lunak browser mendukung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan