<button> Etiketi
HTML
Tıklanabilir bir düğme (buton) tanımlar. button içerisine yazı ya da resim koyabilirsiniz. Genelde <form> etiketi içerisinde formu gönderme işlemini yerine getirmek için type="submit" ile birlikte kullanılır.
Yapısı (Syntax)<button> .. </button>
NOT
HTML5 ile birlikte bazı yeni nitelikler (autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget) eklenmiştir.
| Etiket Türü | Kapanan Etiket |
| Görünüm | Satır Içi |
Nitelikler
| Nitelik | Değeri | Açıklama |
|---|---|---|
| autofocus | autofocus | Sayfa yüklendiğinde otomatik olarak düğmeye odaklanır. |
| disabled | disabled | Düğmenin işlevini geçersiz kılar. |
| form | form_id | Bağlı olduğu formu belirtir. Button etiketi formun dışında bile olsa, ilgili formu göndermek için kullanılabilir. |
| formaction | URL | Formun bilgilerinin nereye gönderileceğini belirler. |
| formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Form bilgilerini sunucuya hangi yöntemle göndereceğini belirler. |
| formmethod |
GET POST |
Form bilgilerinin hangi metod ile gönderileceğini belirler. |
| formnovalidate | formnovalidate | Form etiketlerinin doğrulanmadan gönderileceğini belirler. |
| formtarget |
_blank _self _parent _top framename |
Form gönderildiğinde hangi şekilde açılacağını belirler. Örn. yeni sayfada açmak için _blank kullanılır. |
| name | isim | Form gönderildiğinde değerin hangi isimle gönderileceğini belirler. |
| type |
button reset submit |
Butonun tipini belirler. |
Örnekler
En basit haliyle kullanımları;
<button type="button">Normal buton örneği</button>
<button type="submit">Formu gönderen buton örneği</button>
<button type="reset">Formun değerlerini sıfırlayan buton örneği</button>form niteliği kullanılarak button etiketi form içerisinde olmasa bile o formu gönderme işlemi yapabiliriz.
<button type="submit" form="form1">Form1'i gönder</button>
<button type="submit" form="form2">Form2'yi gönder</button>
<form action="" id="form1">
<input type="text" name="deger">
</form>
<form action="" method="get" id="form2">
<input type="text" name="deger">
</form>