- Konu sahibi
- #1
Radio alanlarını aynı soruya ait seçenekler olarak gruplamak için aynı form sahibine ve aynı ağaç kapsamına ait kontrollere ortak, boş olmayan
Görsel ve anlamsal gruplama için ilgili alanları
Aşağıdaki formda iletişim tercihi tek seçenekli, ilgi alanları ise çok seçeneklidir.
Dosyayı tarayıcıda açıp ilk grupta iki seçeneği art arda deneyin: ikinci radio seçildiğinde ilk seçim otomatik olarak kaldırılmalıdır. Checkbox grubunda ise birden fazla kutu işaretli kalmalıdır. Form gönderildiğinde örnek veri mantıksal olarak şu şekildedir:
Yukarıdaki tablo tek ve çoklu seçim davranışını ayırır. Aynı name değerinin nasıl çözüldüğünü sunucu tarafında da doğrulayın:
Radio alanlarına yanlışlıkla farklı
name değeri verin. Böylece kullanıcı yalnızca birini seçebilir. Checkbox alanları ise aynı name değerine sahip olsalar bile birbirini dışlamaz; birden fazla seçimin gönderilmesi gerekiyorsa her checkbox için aynı name değerini ve sunucu ayrıştırıcısının beklediği alan adını kullanın. [] HTML’in evrensel dizi türü değildir; alan adının parçasıdır, PHP gibi ayrıştırıcılar onu dizi olarak yorumlar.Görsel ve anlamsal gruplama için ilgili alanları
fieldset içine, grubun açıklamasını da legend içine yerleştirin. id değerleri her kontrol için benzersiz olmalı; label öğesinin for değeri ilgili kontrolün id değeriyle eşleşmelidir. Asıl seçim davranışını belirleyen unsur name değeridir; yalnızca aynı fieldset içinde bulunmak radio alanlarını tek seçimli yapmaz.Çalışan temel örnek
Aşağıdaki formda iletişim tercihi tek seçenekli, ilgi alanları ise çok seçeneklidir.
action değeri örnek amaçlıdır; kendi sunucu uç noktanızla değiştirilmelidir.
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Alan gruplama örneği</title>
<style>fieldset, input, button { border-radius: 3px; }</style>
</head>
<body>
<form action="/form" method="post">
<fieldset>
<legend>İletişim tercihi</legend>
<input type="radio" id="email" name="contact_method" value="email" required>
<label for="email">E-posta</label>
<input type="radio" id="phone" name="contact_method" value="phone">
<label for="phone">Telefon</label>
</fieldset>
<fieldset>
<legend>İlgi alanları</legend>
<input type="checkbox" id="html" name="interests[]" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="interests[]" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="javascript" name="interests[]" value="javascript">
<label for="javascript">JavaScript</label>
</fieldset>
<button type="submit">Gönder</button>
</form>
</body>
</html>Dosyayı tarayıcıda açıp ilk grupta iki seçeneği art arda deneyin: ikinci radio seçildiğinde ilk seçim otomatik olarak kaldırılmalıdır. Checkbox grubunda ise birden fazla kutu işaretli kalmalıdır. Form gönderildiğinde örnek veri mantıksal olarak şu şekildedir:
contact_method=phone ve seçilen kutular için interests[]=html gibi ayrı değerler gönderilir.| İhtiyaç | Kontrol | name kullanımı | Beklenen sonuç |
|---|---|---|---|
| Tek seçenek | radio | Aynı | Gruptan bir değer |
| Birden fazla seçenek | checkbox | Aynı alan adı; dizi gösterimi ayrıştırıcıya bağlı | Sıfır veya daha çok değer |
| Bağımsız onaylar | checkbox | Farklı | Her alan ayrı değerlendirilir |
Uygulama ve kontrol adımları
- Tek bir cevabın seçileceği her radio grubundaki tüm kontrollere aynı
namedeğerini verin. Farklı soruların radio alanlarında farklınamedeğerleri kullanın. - Birden fazla cevaba izin verilen checkbox alanlarında aynı mantıksal alan adını kullanın. Sunucu tarafınız dizileri destekliyorsa
interests[]biçimini; desteklemiyorsa sunucunuzun beklediği dizi aktarım biçimini seçin. - Her kontrol için benzersiz bir
idtanımlayın ve metnilabel for="..."ile bağlayın. Kullanıcının metne tıklayarak seçim yapabilmesi, erişilebilirlik ve kullanılabilirlik açısından önemlidir. - Grubu
fieldsetvelegendile açıklayın. Zorunlu bir radio cevabı gerekiyorsa genellikle gruptaki uygun bir radio kontrolünerequiredekleyin. - Formu gönderip sunucu tarafında gelen alan adlarını ve değerlerini kontrol edin. Hiç checkbox seçilmemişse bu alanın hiç gönderilmemesi normaldir; sunucu bunu boş liste olarak ele almalıdır.
Sık yapılan hatalar ve karar tablosu
Yukarıdaki tablo tek ve çoklu seçim davranışını ayırır. Aynı name değerinin nasıl çözüldüğünü sunucu tarafında da doğrulayın:
Radio alanlarına yanlışlıkla farklı
name değerleri vermek, kullanıcının aynı soruda birden fazla seçenek işaretleyebilmesine yol açar. Tersine, bağımsız onay kutularına aynı radio mantığı uygulanamaz; checkbox'ları radio türüne çevirmek çoklu seçimi engeller. Ayrıca id değerlerini aynı yapmak veya bir checkbox seçilmediğinde sunucuya boş bir değer geleceğini varsaymak hatalıdır. Radio grubunda hiçbir seçenek işaretli değilse, required yoksa alan sunucuya hiç gelmeyebilir; bu nedenle zorunlu alan doğrulamasını sunucu tarafında da yapın.