Formlar ve Veri Güvenliği

Bir cümlelik özet

Form, bir web sayfasında kullanıcının bilgi girip gönderebildiği bölümdür; bu derste erişilebilir bir form kurmayı ve girilen bilgileri korumanın kurallarını öğreneceğiz.

Neden önemli?

İnternette her gün formlarla karşılaşırsın: arama kutusu, giriş ekranı, anket, yorum alanı. Bir formu doğru kurmak, hem sayfayı herkes için kullanılabilir yapar hem de yazılan bilginin nereye gittiğini anlamanı sağlar.

Bu ders iki şeyi bir arada öğretiyor. Birincisi, formların nasıl yazıldığı. İkincisi ve daha önemlisi, kişisel bilgilerin neden dikkatle korunması gerektiği. Bir formu kodlamayı öğrenmek, aynı zamanda hangi bilgiyi paylaşıp hangisini paylaşmayacağını bilmeyi de gerektirir.

Önemli: Bu akademide gerçek bir form yoktur ve senden hiçbir kişisel bilgi toplanmaz. Buradaki tüm örnekler yalnızca öğrenme amaçlıdır ve hiçbir yere veri göndermez.

Formun temel parçaları

Form, kullanıcının bilgi girdiği ve genellikle bir yere gönderdiği HTML bölümüdür. Bir formu birkaç temel etiket oluşturur.

form etiketi

Tüm form alanları form etiketinin içine yazılır. Bu etiket, hangi alanların birlikte gönderileceğini belirtir.

<form>
  <!-- Form alanları buraya gelir -->
</form>

action ve method gibi öznitelikler, bilginin nereye ve nasıl gönderileceğini söyler. Bu derste öğrenme amacıyla boş bırakıyoruz; çünkü hiçbir veri göndermiyoruz. Böylece kodun nasıl çalıştığını, hiçbir bilgi dışarı çıkmadan güvenle inceleyebilirsin.

label ve input

input, kullanıcının yazı yazdığı ya da seçim yaptığı kutudur. label, o kutunun ne işe yaradığını açıklayan yazıdır. Bu ikisi her zaman birlikte kullanılmalıdır.

<label for="takma-ad">Takma adın:</label>
<input type="text" id="takma-ad" name="takma-ad">

Buradaki bağ önemlidir: label etiketindeki for değeri, input etiketindeki id değeriyle aynı olmalıdır. Bu bağ sayesinde etikete tıklandığında kutu seçilir ve ekran okuyucular alanın adını doğru okur.

input türleri

type özniteliği, kutunun ne tür bilgi beklediğini belirler. Sık kullanılan birkaç tür:

<input type="text">      <!-- düz metin -->
<input type="number">    <!-- sayı -->
<input type="checkbox">  <!-- işaret kutusu -->
<input type="password">  <!-- gizli yazı -->

password türünde yazılanlar noktalarla gizlenir, böylece yanındaki biri şifreni göremez. Ama unutma: gizli görünmesi, güvenli gittiği anlamına gelmez. Güvenlik bölümünde bunu açıklayacağız.

button etiketi

button, kullanıcının formu göndermek ya da bir işlem başlatmak için tıkladığı düğmedir.

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

Basit doğrulama ve gönderim

required ile zorunlu alan

Doğrulama, kullanıcının doğru ve eksiksiz bilgi girmesini kontrol etmektir. En basit doğrulama required özniteliğidir. Bir alana eklenirse, o alan boşken form gönderilemez.

<label for="renk">En sevdiğin renk:</label>
<input type="text" id="renk" name="renk" required>

Tarayıcı, bu alan boşsa kullanıcıyı otomatik uyarır. Böylece hem kullanıcı hatası azalır hem de ekstra kod yazmadan basit bir kontrol kazanırız.

Form gönderimi kavramı

Bir form gönderildiğinde, içindeki alanların değerleri toplanıp action ile belirtilen adrese iletilir. Yani yazdığın bilgi senin bilgisayarından çıkıp başka bir bilgisayara (sunucuya) gider.

İşte burada durup düşünmek gerekir: Gönderdiğin bilgi artık senin kontrolünde değildir. Bu yüzden bir formu doldurmadan önce her zaman "Bu bilgi kime gidiyor?" sorusunu sormalısın.

Güvenlik notu

Bu ders için güvenlik, kodun kendisi kadar önemlidir. Aşağıdaki kuralları ezberlemek yerine anlamaya çalış.

Kişisel bilgini paylaşma

Kişisel bilgi, seni tanıtan ya da bulunmanı sağlayan her bilgidir: tam adın, ev adresin, telefon numaran, okulun, doğum tarihin, fotoğrafın. İnternette bir forma bu bilgileri yazmadan önce mutlaka bir yetişkine sor.

• Takma ad kullan, gerçek ad yerine.
• Adresini, telefonunu ve okulunu yazma.
• Tanımadığın sitelere hiçbir bilgi girme.

HTTPS nedir?

Adres çubuğundaki bağlantı https:// ile başlıyorsa, tarayıcı ile site arasındaki bilgi şifrelenir; yani yolda başkası okuyamaz. Sadece http:// yazıyorsa bu koruma yoktur.

https://ornek-site.com   ->  şifreli, daha güvenli
http://ornek-site.com    ->  şifresiz, dikkatli ol

HTTPS bilginin yolda korunduğunu gösterir, ama bilgiyi alan kişinin güvenilir olduğunu göstermez. İkisi de gerekir.

Şifre alanları

Bir şifreyi asla arkadaşınla, hatta bir formda görünse bile tanımadığın bir siteyle paylaşma. Güçlü bir şifre uzundur ve tahmin edilmesi zordur; adın ya da doğum tarihin gibi kolay bilgilerden oluşmaz. Aynı şifreyi her yerde kullanma ve şifrelerini bir yetişkinin yardımıyla güvende tut.

Bu akademi ve senin güvenliğin

Tekrar hatırlatalım: DorukVatansever.com senden kişisel bilgi toplamaz. Buradaki formlar yalnızca örnektir ve hiçbir yere veri göndermez. Amacımız kod öğretmek, bilgi toplamak değil.

Mini uygulama

Aşağıda, gönderim yapmayan, erişilebilir küçük bir örnek form var. Kullanıcı bir takma ad ve en sevdiği rengi girebilir. Hiçbir kişisel bilgi istenmez ve hiçbir veri gönderilmez.

<form>
  <label for="takma-ad">Takma adın:</label>
  <input type="text" id="takma-ad" name="takma-ad" required>

  <label for="renk">En sevdiğin renk:</label>
  <input type="text" id="renk" name="renk">

  <button type="button" id="selamla">Selam ver</button>
</form>

<p id="mesaj"></p>

Şimdi DOM dersinden bildiğin addEventListener ile düğmeye küçük bir davranış ekleyelim. Bu kod bilgiyi hiçbir yere göndermez; yalnızca sayfada gösterir.

const dugme = document.getElementById("selamla");
const cikti = document.getElementById("mesaj");

dugme.addEventListener("click", () => {
  const ad = document.getElementById("takma-ad").value;
  cikti.textContent = "Selam, " + ad + "!";
});

Denemen için görevler:

1. Renk alanına da required ekle ve boşken göndermeyi dene.
2. Mesajda rengi de göster.
3. type="text" yerine type="number" deneyip ne değiştiğini gözlemle.

Uygulama laboratuvarı: Formlar ve Veri Güvenliği

Formlar ve Veri Güvenliği konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada Formun temel parçaları ile label ve input arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.

Görev senaryosu

Şu senaryoyu ele al: bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa. Dersin ana hedefi “Form etiketlerini, etiketleme ilişkisini ve kişisel veri güvenliğini/gizliliğini öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.

1. Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
2. En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
3. Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
4. Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
5. Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.

Başarı ölçütleri

• Başlık hiyerarşisi mantıklı mı?
• Bağlantılar klavye ve dokunmayla çalışıyor mu?
• Mobil ekranda yatay taşma var mı?
• Görsellerin alternatif metni ve boyutları tanımlı mı?
• HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?

“Formlar ve Veri Güvenliği” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın bir robotik projesinin amaç ve test sonuçlarını anlatan sayfa senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, Formun temel parçaları ve label ve input ilişkisini daha küçük adımlara bölerek düzelt.

Sık yapılan hatalar

label ile input bağını unutmak

label içindeki for ile input içindeki id aynı değilse bağ kurulmaz. Ekran okuyucu kullananlar alanın ne olduğunu anlayamaz.

<!-- Yanlış: for ve id farklı -->
<label for="isim">Ad:</label>
<input type="text" id="ad">

Butona type vermemek

Bir form içindeki button etiketine type yazmazsan tarayıcı onu submit sayar ve sayfa istenmeden yenilenebilir. İşlem butonlarına type="button" yaz.

Kişisel bilgi istemek

Bir alıştırma formunda bile gerçek ad, adres veya telefon isteme. Örneklerde her zaman takma ad kullan.

HTTPS'i kontrol etmemek

Bilgi girmeden önce adresin https:// ile başladığını kontrol etmemek yaygın bir hatadır. Şifresiz bağlantıya bilgi girme.

Ders özeti

• Form, kullanıcının bilgi girip gönderdiği bölümdür; form, label, input ve button temel parçalarıdır.
• label ile input, aynı for ve id değeriyle birbirine bağlanır ve bu bağ erişilebilirlik için gereklidir.
• required özniteliği, alanı boş bırakmayı engelleyen basit bir doğrulamadır.
• Gönderilen bilgi senin bilgisayarından çıkar; bu yüzden kime gittiğini bilmek önemlidir.
• Kişisel bilgini paylaşma, HTTPS bağlantıyı kontrol et; bu akademi gerçek veri toplamaz.

Kontrol soruları

1. label etiketindeki for değeri neyle eşleşmelidir?
2. required özniteliği ne işe yarar?
3. https:// ile başlayan bir adres ne sağlar?
4. Bir örnek forma gerçek ev adresini yazmak neden doğru değildir?
5. Bir button içindeki type="button" yazmazsan tarayıcı ne varsayar?

Cevaplar

1. Aynı formdaki input etiketinin id değeriyle eşleşmelidir; bu bağ tıklamayı ve ekran okuyucuları doğru çalıştırır.
2. Alanı zorunlu yapar; alan boşken form gönderilemez ve tarayıcı kullanıcıyı uyarır.
3. Tarayıcı ile site arasındaki bilgiyi şifreler, böylece yolda başkası okuyamaz.
4. Gönderilen bilgi kontrolünden çıkar; adres kişisel bir bilgidir ve tanımadığın yerlerle paylaşılmamalıdır. Ayrıca bu akademi zaten veri toplamaz.
5. type belirtilmezse tarayıcı butonu submit sayar ve form gönderilmeye çalışılır.

Kaynak ve doğrulama notu

“Formlar ve Veri Güvenliği” dersi için doğrulama odağı Formun temel parçaları ile label ve input arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.

Sonraki ders

Erişilebilirlik Temelleri: Sayfaları herkesin, farklı ihtiyaçları olan kullanıcılar da dahil, kolayca kullanabilmesi için basit ve güçlü kurallar.