Kurulum ve doğrulama radyo düğmeleri gibi görünüyor Form alanı Bu, birçok web yöneticisine kurulumda en fazla zorluğu verir. Aslında bu alanların kurulumu, radyo düğmeleri yalnızca form gönderildiğinde sınanması gereken bir değer ayarladığından tüm form alanlarının en basitidir.
Radyo düğmelerinin zorluğu, forma yerleştirilmesi, birlikte ilişkilendirilmesi ve bir grup olarak test edilmesi gereken en az iki ve genellikle daha fazla alanın olmasıdır. Düğmeleriniz için doğru adlandırma kurallarını ve düzenini kullanmanız koşuluyla herhangi bir sorun yaşamayacaksınız.
Radyo Düğmesi Grubunu Ayarlama
Formumuzda radyo düğmeleri kullanılırken bakılması gereken ilk şey, düğmelerin radyo düğmeleri olarak düzgün çalışması için düğmelerin nasıl kodlanması gerektiğidir. İstediğimiz davranış aynı anda yalnızca bir düğmenin seçilmesidir; bir düğme seçildiğinde, önceden seçilen herhangi bir düğmenin seçimi otomatik olarak kaldırılır.
Buradaki çözüm, grup içindeki tüm radyo düğmelerine aynı adı ancak farklı değerleri vermektir. İşte radyo düğmesinin kendileri için kullanılan kod.
Bir form için birden fazla radyo düğmesi grubunun oluşturulması da basittir. Tek yapmanız gereken ikinci radyo düğmesi grubuna, ilk grup için kullanılandan farklı bir ad vermek.
Ad alanı, belirli bir düğmenin hangi gruba ait olduğunu belirler. Form gönderildiğinde belirli bir grup için geçirilecek değer, form gönderilirken seçilen grup içindeki düğmenin değeri olacaktır.
Her Düğmeyi Tanımlayın
Formu dolduran kişinin grubumuzdaki her bir radyo düğmesinin ne yaptığını anlayabilmesi için, her bir düğme için açıklamalar sağlamamız gerekir. Bunu yapmanın en basit yolu, düğmenin hemen ardından metin olarak bir açıklama sağlamaktır.
Bununla birlikte, yalnızca düz metin kullanmayla ilgili birkaç sorun vardır:
- Metin, radyo düğmesiyle görsel olarak ilişkilendirilebilir, ancak örneğin ekran okuyucu kullanan bazı kişiler için net olmayabilir.
- Çoğunlukla Kullanıcı arayüzleri radyo düğmeleri kullanılarak, düğmeyle ilişkili metin tıklanabilir ve ilgili radyo düğmesini seçebilir. Buradaki durumumuzda, metin özellikle düğmeyle ilişkilendirilmedikçe metin bu şekilde çalışmaz.
Metni Radyo Düğmesiyle İlişkilendirme
Metni karşılık gelen radyo düğmesiyle ilişkilendirmek için, metnin tıklanması o düğmeyi seçecektir, düğmenin tamamını ve ilişkili metni bir etiket.
Düğmelerden biri için tam HTML şöyle görünecektir:
Kimlik adı ile belirtilen radyo düğmesi olarak için etiket etiketinin parametresi aslında etiketin içinde bulunur, için ve İD parametreleri bazı tarayıcılarda gereksizdir. Bununla birlikte, tarayıcıları genellikle iç içe geçirmeyi tanıyacak kadar akıllı değildir, bu nedenle kodun çalışacağı tarayıcı sayısını en üst düzeye çıkarmak için onları yerleştirmeye değer.
Bu, radyo düğmelerinin kodlanmasını tamamlar. Son adım, radyo düğmesi doğrulamasını kullanarak JavaScript.
Radyo Düğmesi Doğrulamasını Ayarla
Radyo düğmesi gruplarının doğrulanması açık olmayabilir, ancak nasıl yapıldığını öğrendiğinizde anlaşılır.
Aşağıdaki işlev, bir gruptaki radyo düğmelerinden birinin seçildiğini doğrular:
// Radyo Düğmesi Doğrulaması
// telif hakkı Stephen Chapman, 15 Kasım 2004,14 Eylül 2005
// bu işlevi kopyalayabilirsiniz ancak lütfen telif hakkı bildirimini onunla birlikte saklayın
işlev valButton (btn) {
var cnt = -1;
için (var i = btn.length-1; i> -1; ben--) {
eğer (btn [i]. kontrol edildi) {cnt = i; i = -1;}
}
(cnt> -1) btn [cnt] değerini döndürürse;
aksi halde null değerini döndürür;
}
Yukarıdaki işlevi kullanmak için, form doğrulama yordamınızdan çağırın ve radyo düğmesi grup adını iletin. Seçilen grup içindeki düğmenin değerini döndürür veya grupta hiçbir düğme seçilmezse boş değer döndürür.
Örneğin, radyo düğmesi doğrulamasını yapacak kod aşağıdadır:
var btn = valButton (form.group1);
if (btn == null) uyarısı ('Hiçbir radyo düğmesi seçilmedi');
başka uyarı ('Düğme değeri' + btn + 'seçildi');
Bu kod, tıklamada formdaki doğrula (veya gönder) düğmesine eklenen etkinlik.
Tüm forma başvuru, formun tamamına başvurmak için "form" bağımsız değişkenini kullanan işleve parametre olarak iletildi. Radyo düğmesi grubunu ad grubu1 ile doğrulamak için, form.group1 öğesini valButton işlevine geçiririz.
Gereksinim duyacağınız tüm radyo düğmesi grupları, yukarıdaki adımlar kullanılarak ele alınabilir.