- Konu sahibi
- #1
HTML
Fieldset yalnız çevresine çizgi çizilen bir kutu değildir. Gruplama anlamı, özellikle kontrollerin hangi ortak soruyu yanıtladığını belirtmek için önemlidir. Tek tek input alanlarının label açıklamaları yine gereklidir; legend bunların yerine geçen tek bir etiket olarak düşünülmemelidir.
Aşağıdaki bölüm mevcut bir formun içine yerleştirilebilir. Örnek form gönderimi kurmaz; yalnız ilişkili radyo kontrollerini gruplar:
Aynı name değerini kullanan bu radyo düğmeleri tek seçim grubudur. Legend ortak soruyu, label ise her seçeneğin adını açıklar. Fieldset tek başına radyo düğmelerini tek seçimli yapmaz; radyo grubunun name ilişkisi ayrıca doğrudur.
Tarayıcı genellikle gruba bir kenarlık ve legend için yerleşim sağlar. Görünüm CSS ile değişebilir. Yeni kutu görünümü tasarlıyorsanız köşeleri en fazla 5 px tutabilirsiniz; gruplama anlamını yalnız görsel kenarlıkla vermek yerine uygun öğeleri koruyun.
Fieldset üzerine
Önemli istisna, ilk legend içindeki kontrollerdir: bu legend'in altındaki kontroller fieldset disabled durumundan muaf olabilir. Grup açma/kapama kontrolü legend içine yerleştirildiyse bu davranış hesaba katılmalıdır. İstisnayı bütün legend veya bütün grup elemanlarına genellemeyin.
Her sayfa kutusunu fieldset yapmak gerekmez. Kontroller arasında ortak anlam varsa kullanın; yalnız bir kartın kenarlığını oluşturmak için seçmek anlamsal göreviyle uyuşmayabilir.
Legend'i uzun bir açıklama duvarına çevirmek, alan label'larını kaldırmak ve disabled grubun değerlerinin gönderileceğini sanmak yaygın sorunlardır. Görünüm için CSS kullanırken klavye odağını veya kontrol açıklamalarını gizlemeyin. Form verisi alınmıyorsa yalnız name değerine değil, kontrolün etkin durumuna da bakın.
Hayır. Readonly yalnız destekleyen bazı kontrol türlerinde kullanılır; kontrolün değeri gönderilebilir. Fieldset disabled ise grup altındaki kontrolleri farklı kuralla pasifleştirir ve bunlar gönderime katılmaz. Bütün input türlerine readonly uygulanabileceğini varsaymayın.
Form niteliği fieldset'i belirli form kimliğine bağlayabilir; bu ilişki içindeki kontrollere otomatik miras kalmaz. Dışarıda duran input kontrollerinin de gerekirse kendi form ilişkisinin tanımlanması gerekir. Görsel gruplamayla gerçek form sahipliğini ayrı kontrol edin.
<fieldset> etiketi, form içinde birbiriyle ilişkili kontrolleri anlamlı bir grup hâline getirir. Grubun açıklaması çoğunlukla ilk <legend> öğesiyle verilir. Örneğin teslimat seçimi, iletişim tercihi veya aynı sorunun radyo düğmeleri tek bir grup olarak tanımlanabilir.Fieldset yalnız çevresine çizgi çizilen bir kutu değildir. Gruplama anlamı, özellikle kontrollerin hangi ortak soruyu yanıtladığını belirtmek için önemlidir. Tek tek input alanlarının label açıklamaları yine gereklidir; legend bunların yerine geçen tek bir etiket olarak düşünülmemelidir.
Fieldset ile legend nasıl birlikte kullanılır?
Aşağıdaki bölüm mevcut bir formun içine yerleştirilebilir. Örnek form gönderimi kurmaz; yalnız ilişkili radyo kontrollerini gruplar:
HTML:
<fieldset>
<legend>Tercih ettiğiniz iletişim kanalı</legend>
<label>
<input type="radio" name="kanal" value="eposta">
E-posta
</label>
<label>
<input type="radio" name="kanal" value="telefon">
Telefon
</label>
</fieldset>Aynı name değerini kullanan bu radyo düğmeleri tek seçim grubudur. Legend ortak soruyu, label ise her seçeneğin adını açıklar. Fieldset tek başına radyo düğmelerini tek seçimli yapmaz; radyo grubunun name ilişkisi ayrıca doğrudur.
Tarayıcı genellikle gruba bir kenarlık ve legend için yerleşim sağlar. Görünüm CSS ile değişebilir. Yeni kutu görünümü tasarlıyorsanız köşeleri en fazla 5 px tutabilirsiniz; gruplama anlamını yalnız görsel kenarlıkla vermek yerine uygun öğeleri koruyun.
Disabled davranışını doğru yorumlayın
Fieldset üzerine
disabled eklendiğinde içindeki form kontrolleri genel olarak devre dışı kalır. Kullanıcı bu alanlarla normal biçimde etkileşemez; devre dışı kontroller form verisi gönderimine de dahil edilmez. Bu nedenle bir grubun pasifleştirilmesi yalnız soluk renk değişikliği değildir.Önemli istisna, ilk legend içindeki kontrollerdir: bu legend'in altındaki kontroller fieldset disabled durumundan muaf olabilir. Grup açma/kapama kontrolü legend içine yerleştirildiyse bu davranış hesaba katılmalıdır. İstisnayı bütün legend veya bütün grup elemanlarına genellemeyin.
Gruplama öğelerini ayırma
| Öğe | Görevi | Yerine geçmediği |
|---|---|---|
| fieldset | İlişkili kontrollerin grubu | Form gönderim yöntemi |
| legend | Grubun ortak açıklaması | Her alanın ayrı label'ı |
| label | Belirli kontrolün açıklaması | Bütün grubun başlığı |
| div | Genel yerleşim kapsayıcısı | Kendiliğinden form grup anlamı |
Her sayfa kutusunu fieldset yapmak gerekmez. Kontroller arasında ortak anlam varsa kullanın; yalnız bir kartın kenarlığını oluşturmak için seçmek anlamsal göreviyle uyuşmayabilir.
Uygulama ve kontrol adımları
- Hangi kontrollerin aynı soruya veya bilgi bölümüne ait olduğunu belirleyin.
- Bu kontrolleri fieldset içine alın ve kısa, açıklayıcı legend metnini grubun başına yerleştirin.
- Her kontrolün label ilişkisini ve gerekli name/id değerlerini ayrıca kontrol edin.
- Klavye ile gezinip seçeneklerin anlaşılır olduğunu inceleyin; yalnız fare tıklamasına göre değerlendirmeyin.
- Disabled kullanılacaksa hangi değerlerin gönderime katılmadığını ve ilk legend istisnasını test edin.
- Sunucuya gelen veriyi yine doğrulayın. Tarayıcıdaki pasifleştirme, kullanıcının elle istek göndermesini engelleyen güvenlik kuralı değildir.
Sık yapılan hatalar
Legend'i uzun bir açıklama duvarına çevirmek, alan label'larını kaldırmak ve disabled grubun değerlerinin gönderileceğini sanmak yaygın sorunlardır. Görünüm için CSS kullanırken klavye odağını veya kontrol açıklamalarını gizlemeyin. Form verisi alınmıyorsa yalnız name değerine değil, kontrolün etkin durumuna da bakın.
Sık sorulan sorular
Disabled yerine readonly aynı işi yapar mı?
Hayır. Readonly yalnız destekleyen bazı kontrol türlerinde kullanılır; kontrolün değeri gönderilebilir. Fieldset disabled ise grup altındaki kontrolleri farklı kuralla pasifleştirir ve bunlar gönderime katılmaz. Bütün input türlerine readonly uygulanabileceğini varsaymayın.
Fieldset dışarıdaki bir forma bağlanırsa içindeki bütün alanlar otomatik bağlanır mı?
Form niteliği fieldset'i belirli form kimliğine bağlayabilir; bu ilişki içindeki kontrollere otomatik miras kalmaz. Dışarıda duran input kontrollerinin de gerekirse kendi form ilişkisinin tanımlanması gerekir. Görsel gruplamayla gerçek form sahipliğini ayrı kontrol edin.
