Tanda <button> HTML

Definisi dan penggunaan

<button> Tag untuk menentukan tombol yang boleh di klik.

Dalam <button> Dalam element, anda boleh meletakkan teks (dan seperti <i>, <b>, <strong>, <br>, <img> tag lain). Ini adalah untuk <input> Bantuan yang tidak dapat disediakan oleh tombol pemujaan element!

Petunjuk:Selalu tentukan <button> elemen yang ditentukan Atribut typesupaya browser tahu jenis tombol yang anda gunakan.

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

Penjelasan detil

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

Elemen yang dilarang gunakan secara eksklusif adalah peta gambar, karena gerakan yang sensitif mouse dan keyboard dapat mengganggu perilaku tombol formulir.

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

Lihat juga:

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>

try it yourself

Petunjuk:Lebih banyak contoh disediakan di bawah halaman.

Atribut

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

tentukan tempat data formulir akan disubmit saat disubmit formulir.

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

tentukan bagaimana data formulir harus dienkripsi sebelum disubmit ke server.

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

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

hanya berlaku untuk type="submit".
formnovalidate formnovalidate

tentukan supaya data formulir tidak harus diverifikasi saat disubmit.

hanya berlaku untuk type="submit".
formtarget
  • Nama kerangka

tentukan tempat yang harus ditampilkan setelah formulir disubmit.

hanya berlaku untuk type="submit".
name Nama tentukan nama tombol.
popovertarget element_id tentukan elemen tetingkap keluar yang akan dipanggil.
popovertargetaction
  • hide
  • show
  • toggle
 Specifies the operation on the popup element when the button is clicked.
type
  • button
  • reset
  • submit
 Specifies the type of the button.
value Text Specifies the initial value of the button.

Global attributes

<button> The tag also supports Global attributes in HTML.

Event attributes

<button> The tag also supports Event attributes in HTML.

Default CSS settings

None.

More examples

Example 2

Set button style using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* green */
.button2 {background-color: #008CBA;} /* blue */
</style>
</head>
<body>
<button class="button button1">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

Example 2

Set button style using CSS (with hover effect):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

browser support

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