Sayfa içeriği
Elemanları adreslemenin önemi
Forma yerleştirilen herhangi bir öğenin adı olarak düz metin eklersen, bunu yapmanın en iyi yolu bu değildir, çünkü tarayıcı bunların birbiriyle ilişkili olduğunu bilmeyecek.
Bir önceki derste yaptığımız gibi formun elemanlarını isimlendirmenin yolu, bunu yapmanın en iyi yolu değildir ve bunu yapmanın yolu da bu değildir.
Sana daha fazla açıklayalım.
Metin eklemek için bir alan eklemek istiyorsan, bu kodu ekleyeceksin.
- Username<br>
- <input type="text">
Değil mi?
Bu kodda kullanıcı adını eklemek için bir alan ekledim ve öğeleri adresleme'de kastettiğimiz şey öğenin başlığı yani bizim durumumuzda bu kodun başlığı username dir.
Öğeleri Adresleme doğru yolu bu değil ve önceki derste sadece dersi kolaylaştırmak için kullandım.
Aşağıdaki örnekte, metin kutusu için başlık koyma şeklimiz, tarayıcıda çok normal görünse de doğru yol değildir.
Bu yöntemle ilgili sorun, tarayıcının username metninin kendisinden sonra yerleştirilen metin kutusuyla ilişkili olduğunu bilmemesidir ve bu nedenle kullanıcı metne tıklarsa, metin kutusuna yazmaya başlamak istediğini bilemez. Ve bu nedenle kullanıcının yazabilmesi için metin kutusunun içini tıklaması gerekir.
- Username<br>
- <input type="text">
Öğeleri adresleme doğru yolu
Yanında veya üstüne özel metin yerleştirmek istediğin formdaki herhangi bir öğe <label> </label> içine yerleştirilmelidir.
<label> içindeki metni eklerken ve içine yerleştirilen öğeyle ilişkilendirirken, tarayıcı bu öğeyle daha iyi ilgilenir çünkü kullanıcı öğenin etiketine tıklarsa hemen yazmaya başlayabilir.
Bilgisayarda, fareyi kullanarak istediğin şeye tıkladığın için bu konuyu önemli bulmayabilirsin, ancak dokunmatik ekranı olan cep telefonlarında, kullanıcının metnin içine parmağıyla tıklaması çok zor olacaktır. içinde kutuyu açmak için kullanıcı alana açılmasına kadar birkaç kez tıklıcak ve açılana kadar denemesi gerekecek.
Öte yandan, bu sayfaların tasarımını CSS koduyla nasıl değiştireceğini öğrendiğinde çok yararlıdır çünkü bu, kullanıcı bunlarla etkileşime girdiğinde forma yerleştirilen öğelere çok güzel efektler eklemeni sağlayacaktır.
Şimdi, forma yerleştirilen herhangi bir öğeyi kendi adıyla ilişkilendirmek için şunları yapmanı gerekir:
- Öğenin id özelliğini ekle ve öğeye özel bir ad ver.
- <label> etiketine for özelliği ekle ve öğe için belirlediğin id özelliği ile aynı değeri ilet.
Aşağıdaki örnekte, formda <label> adına eklenmiş bir <input type="text"> metin kutusu ekledim.
- <label for="username">Username</label><br>
- <input type="text" id="username">