HTML formunda label nasıl kullanılır? Erişilebilir alan örneği

Bir formun güzel görünmesi, kullanılabilir olduğu anlamına gelmez. Etiketi olmayan alanlar, yalnızca renkle anlatılan hatalar ve klavyeyle seçilemeyen düğmeler ziyaretçiyi durdurabilir. Başlangıçta doğru HTML öğelerini seçmek bu sorunların önemli bir bölümünü önler.

Önce neyi çözmek istediğini belirle

Etiket, doğru alan türü ve klavye kontrolüyle ziyaretçinin ne yapacağını anlayabildiği basit bir form hazırlayacağız. Bu örnek yalnızca arayüzdür; sunucuya kayıt yapmaz.

Adım adım uygula

1 Her alana etiket ver. label ile input’u for/id üzerinden bağla. Placeholder kaybolabilen bir ipucudur; kalıcı etiketin yerine geçmez.
2 Doğru türü seç. E-posta için email, sayısal değer için uygun number alanını değerlendir. Kullanıcının ne gireceğini kısa bir örnekle anlat.
3 Hata mesajını yakın göster. Neyin yanlış olduğunu alanın yanında metinle açıkla. Gönder düğmesini ve odak sırasını yalnızca klavyeyle test et.

Küçük bir örnek

HTML

<form>
  <label for="eposta">E-posta adresin</label>
  <input id="eposta" name="eposta" type="email" required>
  <button type="submit">Devam et</button>
</form>

Sık takılınan nokta

Tarayıcı doğrulamasını sunucu güvenliği sanma. required alanı boş bırakmayı zorlaştırır ama gelen verinin sunucuda yeniden doğrulanması gerekir. Hata durumunda kullanıcının bütün yazdıklarını silmek de gereksiz bir engeldir.

Şimdi kendin dene

Bir ad ve e-posta alanı oluştur. Fare kullanmadan Tab ile alanlara geç; etikete tıklamanın ilgili alana odak verdiğini kontrol et. Hata açıklamasını kırmızı rengin yanında bir cümleyle de yaz.

Bir sonraki adım HTML’de yapı, bağlantı ve form dersleri →

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

HTML formunda label nasıl kullanılır? Erişilebilir alan örneği konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.

Kaynak ve devamı

Resmi belgeleri aç ↗

Webino App denemesi: Etiketin odağı doğru alana taşımasını denedik

Aynı e-posta alanında önce hatalı, sonra eşleşen for/id kullanıldı. Etikete tıklandıktan sonra odaklanan öğe kontrol edildi. Bu deneme tam bir erişilebilirlik denetimi veya ekran okuyucu testi değildir.