Formlar ve Tablolarla Veri Toplama

Önceki derste sayfanıza metin, bağlantı ve görseller ekleyerek içeriği zenginleştirmiştiniz. Bu derste ise sayfanızın artık tek yönlü bilgi vermekle kalmayıp ziyaretçiden de bilgi toplayabilmesini sağlayacaksınız: isim, e-posta, mesaj gibi girdileri alan formlar ve bu bilgileri düzenli sıra hâlinde gösteren tablolar kuracaksınız. Bir sonraki derste bu formları ve tabloları CSS ile şekillendireceğiniz için, burada kuracağınız yapı ileride görsel tasarımınızın temeli olacak.

Bu derste ne yapacağız?

Bir web sayfasında kullanıcıdan ad, e-posta ve mesaj gibi bilgiler alan basit bir iletişim formu; ayrıca satır ve sütunlardan oluşan basit bir veri tablosu oluşturacaksınız. Bu dersin sonunda formun temel elemanlarını (metin kutusu, e-posta kutusu, mesaj alanı, gönder düğmesi) ve tablonun temel yapısını (başlık satırı, veri satırları, hücreler) kendi başınıza kurabileceksiniz.

Ön koşul olarak önceki dersteki temel HTML etiketlerini (<html>, <body>, <p>, <a> gibi) bilmeniz ve bir metin düzenleyicide (örneğin Not Defteri veya Visual Studio Code) HTML dosyası açıp tarayıcıda önizleme yapabiliyor olmanız yeterlidir. Arayüz görünümleri kullandığınız programın sürümüne göre küçük farklılıklar gösterebilir; adımları kendi ekranınıza göre uyarlayın.

Kavram

Bir formu, bir kağıt üzerindeki başvuru formuna benzetebilirsiniz: üzerinde "Adınız: ______", "E-posta: ______" gibi boşluklar vardır, siz doldurursunuz ve formu görevliye teslim edersiniz. HTML'de de aynı mantık geçerlidir; <form> etiketi kağıdın kendisidir, içindeki <input> etiketleri doldurulacak boşluklardır, <button> ise formu "teslim eden" gönder düğmesidir.

Bir tablo ise sınıf listesi ya da market fişi gibi düşünülebilir: satırlar ve sütunlardan oluşan bir ızgaradır. HTML'de <table> tüm ızgarayı, <tr> (table row) her bir satırı, <th> (table header) başlık hücrelerini, <td> (table data) ise sıradan veri hücrelerini temsil eder. Başlık satırı genellikle kalın gösterilir, tıpkı bir fişin en üstünde "Ürün" ve "Fiyat" yazması gibi.

Adım adım uygulama

1. Metin düzenleyicinizde yeni bir dosya açın ve iletisim.html adıyla kaydedin. Dosyanın başına önceki derste öğrendiğiniz temel iskeleti yazın: en dışta <html>, içinde <head> ve <body> etiketleri bulunmalı.
2. <body> etiketinin içine bir başlık ekleyin: <h1>Bize Ulaşın</h1>. Bu, kullanıcıya sayfanın ne işe yaradığını anlatır.
3. Formu başlatın: <form> etiketini açın. Bu etiket, içindeki tüm giriş alanlarını tek bir bütün olarak gruplar.
4. Ad soyad için bir metin kutusu ekleyin: <label>Ad Soyad:</label> ardından <input type="text" name="adsoyad">. Buradaki <label> etiketi, kutunun ne için olduğunu açıklayan görünür yazıdır; type="text" ise kullanıcının serbest metin yazabileceği tek satırlık bir kutu oluşturur.
5. E-posta için benzer bir satır ekleyin, ama bu kez <input type="email" name="eposta"> kullanın. type="email" tarayıcıya bu kutuya geçerli bir e-posta biçimi (örneğin isim@site.com) girilmesi gerektiğini söyler ve kullanıcı hatalı yazarsa uyarı gösterir.
6. Mesaj için çok satırlı bir alan ekleyin: <label>Mesajınız:</label> ardından <textarea name="mesaj" rows="4" cols="30"></textarea>. <textarea>, <input>'ten farklı olarak birkaç satırlık uzun metin yazmaya uygundur; rows yükseklik, cols genişlik belirler.
7. Bir gönder düğmesi ekleyin: <button type="submit">Gönder</button>. type="submit" bu düğmeye basıldığında formun bilgilerini göndermesi gerektiğini belirtir.
8. Formu kapatın: </form> etiketini yazın. Açtığınız her etiketi kapatmayı unutmayın, aksi hâlde sayfanın geri kalanı da yanlışlıkla form içinde sayılabilir.
9. Dosyayı kaydedin ve tarayıcınızda çift tıklayarak açın; ad, e-posta ve mesaj kutularının, ardından "Gönder" düğmesinin göründüğünü kontrol edin.
10. Şimdi aynı dosyaya bir tablo ekleyelim. Formdan sonra <h2>Gelen Mesajlar</h2> başlığı, ardından <table> etiketini açın.
11. Başlık satırını oluşturun: <tr> içinde sırayla <th>Ad Soyad</th>, <th>E-posta</th>, <th>Konu</th> yazıp </tr> ile satırı kapatın. Bu satır, tablonun sütun başlıklarını gösterir.
12. Bir veri satırı ekleyin: <tr> içinde <td>Ayşe Kaya</td>, <td>ayse@ornek.com</td>, <td>Randevu Talebi</td> yazıp </tr> ile kapatın. İsterseniz benzer şekilde ikinci bir örnek satır daha ekleyin.
13. Tabloyu </table> ile kapatın, dosyayı tekrar kaydedin ve tarayıcıda yenileyerek başlık satırının ve veri satırlarının düzgün hizalanmış hâlde göründüğünü doğrulayın.

Sık karşılaşılan sorunlar

Sorun	Olası Neden	Çözüm
Form kutuları sayfada hiç görünmüyor	<input> etiketi <form> etiketinin dışına yazılmış olabilir	Tüm <input> ve <textarea> etiketlerinin <form> ile </form> arasında olduğunu kontrol edin
Tablo hücreleri iç içe geçmiş, kenarlıksız ve düzensiz görünüyor	Bu, bu aşamada normaldir; HTML tabloya henüz görsel stil vermez	Kenarlıklar ve aralıklar bir sonraki derste CSS ile eklenecek, şimdilik yapının doğruluğuna odaklanın
<label> yazısına tıklayınca ilgili kutu seçilmiyor	<label> ile <input> birbirine bağlanmamış	<label> etiketine for özniteliği, <input> etiketine ise aynı değeri taşıyan id özniteliği ekleyin, örneğin for="adsoyad" ve id="adsoyad"
Tabloda bir satırdaki sütun sayısı diğerinden farklı görünüyor	Bir <tr> içinde eksik veya fazla <td> kullanılmış	Her <tr> içindeki <td> sayısının başlık satırındaki <th> sayısıyla aynı olduğunu sayarak kontrol edin
E-posta kutusuna herhangi bir metin yazılabiliyor, format kontrolü yapılmıyor	type özniteliği "text" olarak bırakılmış olabilir	İlgili <input> etiketinde type="email" yazdığınızdan emin olun

Mini görev

Kendi iletisim.html dosyanızı geliştirin: forma bir de "Telefon" alanı ekleyin (type="text" kullanabilirsiniz), tabloya ise en az üç veri satırı (üç farklı kişi) girin. İşiniz bitince aşağıdaki listeyle kendinizi kontrol edin.

Form, <form> ile başlayıp </form> ile bitiyor mu?
Ad soyad, e-posta, telefon ve mesaj için ayrı ayrı <label> ve giriş alanları var mı?
Gönder düğmesi type="submit" olarak tanımlanmış mı?
Tabloda bir başlık satırı (<th> hücreleriyle) ve en az üç veri satırı (<td> hücreleriyle) var mı?
Her satırdaki hücre sayısı başlık satırıyla aynı mı?
Tüm etiketler açıldığı gibi kapatılmış mı?

Kendini sına

1. Bir formu tarayıcıya gönderen düğmeyi hangi type değeri oluşturur?

2. Çok satırlı mesaj yazmak için <input> yerine hangi etiket kullanılır?

3. Bir tabloda başlık hücresi ile sıradan veri hücresi hangi etiketlerle ayırt edilir?

4. <label> etiketini ilgili giriş kutusuna bağlamak için hangi iki öznitelik kullanılır ve bunlar birbirine nasıl eşleşir?

5. Bir e-posta girişinin geçerli formatta olup olmadığını tarayıcının otomatik kontrol etmesi için <input> etiketinde hangi öznitelik hangi değerle kullanılmalıdır?

Cevaplar

1. type="submit" değeri; bu, düğmeye basıldığında formun verilerini göndermesini sağlar.

2. <textarea> etiketi; birden fazla satırlık serbest metin girişine izin verir.

3. Başlık hücreleri <th>, veri hücreleri <td> etiketiyle oluşturulur; ikisi de <tr> satırının içinde yer alır.

4. <label> etiketinde for özniteliği, <input> etiketinde ise id özniteliği kullanılır; bu iki değer birebir aynı metni taşımalıdır, örneğin for="eposta" ve id="eposta".

5. type özniteliği "email" değeriyle kullanılmalıdır, yani type="email".

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol