HTML · Formlar — videolu atölye

Formlar

Etiketli, klavyeyle kullanılabilir ve beklentisi anlaşılır bir form kurmak.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

label for ile input id eşleşir; kullanıcı etikete tıklayabilir. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

Gönderim yapmayan denemede type=button düğmesi kullan; gerçek kayıt varmış izlenimi verme.

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

Bir değeri sen değiştir

Etikete tıklayıp doğru kutunun odaklandığını kontrol et. Tab ile bütün alanları ve düğmeyi dolaş; görünür odak işaretini izle.

Hata nereden gelir?

İçeriği sadece placeholder ile açıklamak kullanıcı yazınca bilgiyi kaybettirir; görünür label bırak.

Kendi çözümünü kur

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. Aynı id değerini iki kez kullanma; her label kendi alanını tanımlamalı.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu 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>

Kendini kontrol et

Veriyi gönderirken id mi name mi alan anahtarı olur? Yanıt: name; id belge içindeki öğeyi etiketle ilişkilendirmek gibi amaçlarla tanımlar.

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