HTML Tablo ve Form Etiketleri
<table> - Tablo Etiketi
Bu etiket, tablo oluşturmak için kullanılır. Tek başına kullanıldığında işlevselliği yoktur. <thead> ve <tbody> olmak
üzere ana iki bölümden oluşur. Bunların yanı sıra tablonun hücrelerini tanımlamak için <tr> , <td> ve <th> etiketleri
kullanılır.
<thead> - Tablo Başlık Satırı Etiketi
Bu etiket, tablonun üst başlık satırını belirler. Bu etiketin içinde oluşturulacak hücreler tablonun sütun başlıklarını
oluşturur.
<tbody> - Tablo Gövde Etiketi
Bu etiket ile tablonun içeriği olan hücreler belirlenir. Bu etiketin içinde oluşturulacak hücrelerde tablonun verileri
yazılır.
<tr> - Tablo Satır Etiketi
Bu etiket, hem <thead> hem de <tbody> etiketleri içerisinde kullanılır. Tabloda yeni bir satır oluşturur. Dolayısıyla
thead içerisinde oluşturulacak satırlar başlık satırı, tbody içerisinde oluşturulacak satırlar yeni bir tablo verisi satırı
olacaktır. Hücreler bu etiketin içerisinde oluşturulur.
<td> ve <th> - Hücre Etiketi
Bu etiketler ile tablo içerisinde hücreler oluşturulur. <tr> satır etiketinin içerisine yazılırlar. Yani işleyiş mantığı,
“önce satır oluştur, ardından içerisindeki hücreleri oluştur” şeklindedir. İki etiketin farkı ise <th> 'ın başlık hücreleri
için, <td> 'nin ise içerik hücreleri için kullanılmasıdır. Bu yüzden <th> genellikle thead bölümünde, <td> ise tbody
bölümünde kullanılır.
Şimdi tüm bu etiketler ile bir örnek tablo oluşturalım.
Örnek:
<table>
🖨️ Çıktı:
<thead>
<tr>
<th>Öğrenci Adı</th>
<th>Öğrenci No</th>
<th>Öğrenci Sınıfı</th>
</tr> Örnekte görüleceği üzere başlık satırı
</thead> koyu olarak gösterildi. Tablo içeriği ise
<tbody> standart kalınlıkta gösterildi.
<tr>
Tablonun standart görünüşü yukarıdaki
<td>Bayram SÖZBİR</td>
gibidir. Tablo hücrelerini ayıran çizgiler
<td>1907</td>
görünmez. Çizgileri göstermek için
<td>33/E</td> border özelliğini kullanabiliriz. Bu özellik
</tr>
sayısal değer alır ve bu değer
</tbody>
büyüdükçe çizgi kalınlığı artar.
</table>
Aynı tabloyu border="1" vererek çizelim;
<table border="1">
🖨️ Çıktı:
<thead>
<tr>
<th>Öğrenci Adı</th>
<th>Öğrenci No</th>
<th>Öğrenci Sınıfı</th>
</tr>
HTML Tablo ve Form Etiketleri 1
</thead>
<tbody>
<tr>
<td>Bayram SÖZBİR</td>
<td>1907</td>
<td>33/E</td>
</tr>
</tbody>
</table>
Eğer ilk sütunu da başlık sütunu olarak oluşturmak istersek aşağıdaki şekilde bir kullanım yapabiliriz;
<table border="1">
🖨️ Çıktı:
<thead>
<tr>
<th>Öğrenci Adı</th>
<th>Öğrenci No</th>
<th>Öğrenci Sınıfı</th>
</tr> Görüldüğü üzere ilk sütunda başlık
</thead> olarak tanımlamak istediğimiz hücrelerin
<tbody> her birini (tbody içinde olsalar bile) <th>
<tr> olarak tanımlamamız gerekir.
<th>Bayram SÖZBİR</th>
<td>1907</td>
<td>33/E</td>
</tr>
</tbody>
</table>
<form> - Form Etiketi
HTML form etiketi, bir sunucuya / backend’e veri göndermek için içerisinde kullanıcı etkileşimli elementler
barındıran bir belge bölümünü temsil eder. (Sonraki iş: Verileri göndermek için action özelliğine verilerin
gönderilmek istendiği sunucunun adresinin yazılması gerekir.)
İçerisinde genellikle <input> , <select> , <label> , <button> gibi kullanıcı etkileşimli elementler yazılır.
<input> - Veri Girişi Elementi
Kullanıcıdan veri almak için kullanılır. Verinin tipine göre type özelliğinde verilen değere bakarak farklı şekillere
bürünebilir.
Text Girişi
type="text" olarak verilen bir input elementi, metin girişi için kullanılır ve görünümü de buna göre otomatik şekil alır.
🖨️ Çıktı:
<input type="text" />
Number Girişi
HTML Tablo ve Form Etiketleri 2
Yine metin girişine benzer şekilde type özelliğine number verilirse, sayı kabul edecek şekilde bir giriş halini alır.
ℹ️ Hem metin hem de sayı girişleri için placeholder özelliğini kullanarak, veri girilmediği durumlarda input’un
içerisinde silik şekilde o girişi açıklayan bir metin girilebilir.
🖨️ Çıktı:
<input type="number" placeholder="Lütfen yaşınızı giriniz" />
Tarih Girişi
🖨️ Çıktı:
<input type="date" />
Dosya Girişi
🖨️ Çıktı:
<input type="file" />
Onay Kutusu
<input> girişinin bu tipinde veri true veya false olarak ele alınır.
🖨️ Çıktı:
<input type="checkbox" />Kabul ediyorum
Radyo Grubu Butonları
Tekli seçme durumlarında kullanılan giriş tipidir.
🖨️ Çıktı:
<input type="radio" name="cinsiyet" />Erkek
HTML Tablo ve Form Etiketleri 3
<br />
<input type="radio" name="cinsiyet" />Kadın
Burada name özelliği ile bu iki radio button’unun aynı seçim grubunda olmasını sağlıyoruz. Bu sayede biri seçili iken
diğeri seçildiğinde öncekinin seçimi otomatik olarak kaldırılır. Aynı zamanda name ile bu iki input’un, aynı verinin
girdisini temsil ettiğini de belirtmiş oluruz. Eğer name özelliğini belirtmezsek veya farklı isimler verirsek ikisi de
seçilebilir olur ve farklı verileri ele aldıkları kabul edilir. Dolayısıyla form’da ayrı veriler olarak gönderilmeye çalışılır.
<textarea> - Metin Alanı Etiketi
Bu etiket ile kullanıcıdan uzun metin girişlerini alabiliriz. rows özelliği ile başlangıçtaki yüksekliğini, cols özelliği ile
de başlangıçtaki genişliğini belirleyebiliriz. Bunları tanımlamazsak standart bir boyutta görünür.
🖨️ Çıktı:
<textarea></textarea>
<select> - Seçim Kutusu Etiketi
Bu element ile kullanıcıya açılır menü içerisinde önceden tanımlı seçenekler sunularak bir tanesini seçmesi
sağlanır. İçerisindeki seçenekleri, yine içinde tanımlayacağımız <option> etiketleri ile sağlarız. Her bir seçenek bir
<option> etiketi içerisine yazılır. Option’ın değerini temsil eden data value özelliğine yazılır.
🖨️ Çıktı:
<label for="dersler">Seçilen Ders</label><br />
<select id="dersler">
<option value="mat">Matematik</option>
<option value="turkce">Türkçe</option>
<option value="fizik">Fizik</option>
</select>
Dilersek, başlangıçta seçilmeyen değeri temsil eden, value özelliği "0" veya buna benzer bir değer verilerek (veya
hiç değer vermeden) ve selected özelliği de vererek başlangıçta bu değerin seçili olmasını sağlayabiliriz. Selected’ı
value’su olan ve başlangıçta seçili olmasını istediğimiz bir option’da da kullanabiliriz.
🖨️ Çıktı:
<label for="dersler">Seçilen Ders</label>
<select id="dersler">
<option selected>--Lütfen ders seçiniz--</option>
<option value="mat">Matematik</option>
<option value="turkce">Türkçe</option>
<option value="fizik">Fizik</option>
</select>
<label> - Input için Metin Etiketi
HTML Tablo ve Form Etiketleri 4
Bu element ile input’lara bilgi etiketi (metni) sağlarız. Bu sayede ilgili input’un hangi verinin girişi olduğunu
kullanıcıya belirtmiş oluruz. Tarayıcıların da etiketleri ilgili input ile ilişkilendirmesi için öncelikle ilgili input’a id
özelliği ile istediğimiz ismi veririz. Ardından label’a for özelliğini kullanarak input’ta verdiğimiz ismi buraya da
girerek etiketi input’a bağlamış oluruz. Input’una bağlanmış bir etiket tıklandığında yazma imleci ilgili input’a
odaklanacaktır.
🖨️ Çıktı:
<label for="isim">Adınız</label><br />
<input type="text" id="isim" placeholder="adınızı giriniz" />
Aynı şekilde checkbox ve radio butonları için de label’lar kullanılır. Bu sayede seçimi daha kolay olan ve tarayıcı
tarafından da ilişkilendirilen girişler elde ederiz.
<input id="erkek" type="radio" name="cinsiyet" />
🖨️ Çıktı:
<label for="erkek">Erkek</label>
<br />
<input id="kadin" type="radio" name="cinsiyet" />
<label for="kadin">Kadın</label>
<br /><br />
<input type="checkbox" id="kabul" />
<label for="kabul">Kabul ediyorum</label>
<button> - Buton Etiketi
Button etiketi ile form içerisindeki input’lara girilen değerleri sunucuya iletiriz. Button’un bunun dışında farklı
görevleri de vardır. type özelliği ile görevini seçebiliriz. type özelliğine;
submitverdiğimizde ilk olarak yukarıda bahsettiğimiz şekilde verileri gönderme işlemini yapar. Form içerisinde
yazılan buton’un default değeri budur. Yani type değeri verilmezse submit kabul edilir.
reset verdiğimizde form’daki input’ların değerlerini sıfırlar.
buttonverdiğimizde ise form’dan bağımsız bir şekilde, basıldığında bir javascript kodu çalıştırmak amacıyla
kullanılır.
🖨️ Çıktı:
<form>
<label for="isim">Adınız</label><br />
<input type="text" id="isim" />
<label for="soyisim">Soyadınız</label><br />
<input type="text" id="soyisim" />
<br /><br />
<button type="reset">Gönder</button>
</form>
HTML Tablo ve Form Etiketleri 5