HTML <button> Etiketi

Tanım ve Kullanım

<button> etiketi, tıklanabilir düğüm tanımlar.

içinde <button> Element içeriğinde, metin (ve <i>, <b>, <strong>, <br>, <img> gibi etiketler gibi) yerleştirebilirsiniz. Bu <input> Elementin oluşturabileceği butonun yapamadığı şey!

Uyarı:Her zaman <button> element belirler type özelliğitarayıcıya, düğmenin ne tür bir düğme olduğunu bildirmek için kullanılır.

Uyarı:CSS ile düğmelere kolayca stil ekleyebilirsiniz! Aşağıdaki örnekleri veya CSS Düğme Eğitimi.

Ayrıntılı açıklama

<button> denetimi ile <input type="button"> karşılaştırıldığında, daha güçlü işlevler ve daha zengin içerik sunar.<button> ile </button> Arka arkaya etiketler arasındaki tüm içerik, herhangi bir kabul edilebilir metin içerikleri (metin veya multimedya içerikleri) dahil olmak üzere, düğme içeriğidir. Örneğin, bir resim ve ilgili metni içerebiliriz ve bunları düğmede çekici bir işaret resmi olarak oluşturabiliriz.

sadece yasaklanmış olan element, çünkü fare ve klavye duyarlı eylemleri, form düğme davranışını etkileyebilir.

Düğme için her zaman type özelliği. Internet Explorer'in varsayılan türü "button"diğer tarayıcılar (W3C normlarına göre) varsayılan değeri "submit".

Ayrıca bkz.:

HTML DOM Referans Kılavuzu:Button nesnesi

CSS Eğitimi:Düğmenin stili

Örnek

Tıklanabilir düğmeleri böyle işaretleyin:

<button type="button">Bana tıkla!</button>

kendiniz deneyin

Uyarı:Daha fazla örnek için sayfa altında bulunmaktadır.

Özellik

Özellik Değer Açıklama
autofocus autofocus Düğmenin sayfa yüklenirken otomatik olarak odaklanması gerektiğini belirtir.
disabled disabled Düğmenin devre dışı bırakılması gerektiğini belirtir.
form form_id Düğmenin hangi form'a ait olduğunu belirtir.
formaction URL

Form verilerinin gönderileceği yeri belirtir.

Sadece type="submit" için geçerlidir.
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Form verilerinin sunucuya gönderilmeden önce nasıl kodlanacağını belirtir.

Sadece type="submit" için geçerlidir.
formmethod
  • get
  • post

Form verilerinin nasıl gönderileceğini (hangi HTTP yöntemini kullanacağını) belirtir.

Sadece type="submit" için geçerlidir.
formnovalidate formnovalidate

Form verilerinin gönderilirken doğrulanmaması gerektiğini belirtir.

Sadece type="submit" için geçerlidir.
formtarget
  • Çerçeve adı

Formu gönderdikten sonra yanıtın nerede görüntülenmesi gerektiğini belirtir.

Sadece type="submit" için geçerlidir.
name İsim Düğmenin adını belirler.
popovertarget element_id Belirtilen açılır pencere öğesini çağırmak için gereklidir.
popovertargetaction
  • hide
  • show
  • toggle
 düğme tıklanınca açılır pencere öğesine yapılacak işlemi belirler.
type
  • button
  • reset
  • submit
 düğmenin türünü belirler.
value metin düğmenin başlangıç değerini belirler.

genel özellikler

<button> etiketler destekler HTML'deki genel özellikler.

olay özellikleri

<button> etiketler destekler HTML'deki olay özellikleri.

Varsayılan CSS ayarları

Yok.

Daha fazla örnek

Örnek 2

CSS ile düğme stili ayarlama:

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

kendiniz deneyin

Örnek 2

CSS ile düğme stili ayarlama (sallantı etkisi ile):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: beyaz;
  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: beyaz;
  color: siyah;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: beyaz;
}
.button2 {
  background-color: beyaz;
  color: siyah;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: beyaz;
}
</style>
</head>
<body>
<button class="button button1">yeşil</button>
<button class="button button2">mavi</button>
</body>
</html>

kendiniz deneyin

tarayıcı destekler

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek