Formlar

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Form birden çok giriş alanını tek işlem için gruplar. label alanın ne istediğini anlatır; placeholder ise örnek verir ve yazmaya başlayınca kaybolur. Bu nedenle placeholder etiketi yerine geçmez. label üzerindeki for ile input üzerindeki id aynı olursa etikete tıklamak ilgili alanı odaklar.

name gönderilen verinin anahtarıdır. id belge içinde öğeyi tanımlar; iki alan aynı id değerini taşımamalıdır. type="email" gibi türler tarayıcıya beklenen biçim hakkında bilgi verir. required boş bırakmayı engelleyebilir, fakat bu kontroller verinin doğru kişiye ait olduğunu kanıtlamaz ve sunucu tarafı doğrulamasının yerini tutmaz.

HTML formu eklemek veriyi otomatik olarak kaydetmez. Gerçek gönderim için action/method hedefini veya JavaScript akışını ayrıca tasarlamak gerekir. Başlangıçta gerçek kişisel bilgi kullanmadan alanlara örnek veri gir. Önce klavyeyle sırayı, hata mesajını ve gönder düğmesinin amacını değerlendir.

İlk örneği oku ve dene

<form>
  <label for="isim">Adın:</label>
  <input id="isim" name="isim" type="text" placeholder="Ayşe">

  <label for="eposta">E-posta:</label>
  <input id="eposta" name="eposta" type="email" placeholder="ornek@eposta.com">

  <button type="submit">Gönder</button>
</form>

Ad ve e-posta kutuları ile bir Gönder butonu görünür. name alanları gönderilecek veriyi adlandırır. Bu örnek yalnızca form arayüzüdür; bilgiyi kaydeden bir sunucu içermez.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. label for ile input id eşleşir; kullanıcı etikete tıklayabilir.
2. name verinin gönderimde kullanılacak anahtarıdır.
3. required alanı boş bırakınca tarayıcı gönderimi engeller.
4. Gönderim yapmayan denemede type=button düğmesi kullan; gerçek kayıt varmış izlenimi verme.

<form>
  <label for="ornek-eposta">E-posta</label>
  <input id="ornek-eposta" name="email" type="email" required>
  <label for="konu">Konu</label>
  <select id="konu" name="topic"><option>HTML</option><option>CSS</option></select>
  <button type="button">Bu yalnızca arayüz denemesi</button>
</form>

Etiketi olan e-posta kutusu ve konu seçimi. Düğme veri göndermez.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Etikete tıklayıp doğru kutunun odaklandığını kontrol et.
2. Tab ile bütün alanları ve düğmeyi dolaş; görünür odak işaretini izle.
3. Bir submit düğmesini yalnızca yerel denemede kullan; alan boşken ve hatalı e-posta biçimindeyken tarayıcının davranışını karşılaştır.

<form>
<label for="ad">Ad</label>
<input id="ad" name="name" autocomplete="given-name" required>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="message" rows="3"></textarea>
<button type="button">Örnek form</button>
</form>

Ad ve mesaj alanları; bu örnekte kayıt veya gönderim yapılmaz.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. İçeriği sadece placeholder ile açıklamak kullanıcı yazınca bilgiyi kaybettirir; görünür label bırak.
2. required eklemek kötü niyetli isteği durdurmaz; gerçek uygulamada sunucuda da doğrula.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Veriyi gönderirken id mi name mi alan anahtarı olur?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.