HTML radio button Kullanımı

Kullanıcınıza iki veya daha fazla seçenek arasında bir seçim yaptırmak istediğinizde radyo düğmeleri kullanılmalıdır. Onay kutularına çok benziyorlar, ancak bir grup seçenek içinde sıfır veya birkaç seçime izin vermek yerine, bir radyo düğmesi sizi yalnızca birini seçmeye zorlar. En basit haliyle, bir radyo düğmesi, aşağıdaki gibi type özelliği radio olarak ayarlanmış bir giriş öğesidir:

Bununla birlikte, tüm input öğelerinde olduğu gibi, kullanılabilir olması için bir name tanımlamanız gerekir – bir ad olmadan, form işlenmek üzere bir sunucuya geri gönderildiğinde öğe tanımlanamaz. Ayrıca bir değer belirlemek istiyorsunuz – bu, radio düğmesi seçildiyse sunucuya gönderilen değer olacaktır. İşte bir örnek:

Şimdi, sunucuya geri gönderilebilen tam işlevli radyo düğmemiz var. Ancak, örneği denerseniz, tek bir radyo düğmesinin gerçekten mantıklı olmadığını fark edeceksiniz. Bu, size her zaman iki veya daha fazla seçenek arasında karar vermenizi sağlayan radyo düğmesinin doğasından kaynaklanmaktadır – yalnızca bir seçeneğiniz varsa (açık veya kapalı), o zaman bir onay kutusu kullanmalısınız.

Bunu göz önünde bulundurarak, size en sevdiğiniz evcil hayvanınızı seçmenizi sağlayan birkaç radyo düğmesinin olduğu çok daha eksiksiz bir örnek göstermeme izin verin:

Üç radio düğmesinin’de name özelliğinde nasıl aynı değeri paylaştığına dikkat edin – bu çok önemlidir çünkü aynı gruptaki radyo düğmelerini birbirine bağlar. Bir grup radyo düğmesi içinde yalnızca bir seçim olabileceğinden, bu, radyo düğmelerinden birini seçtiğinizde, işaretlenen diğer radyo düğmelerinin işaretinin kaldırılacağı anlamına gelir. Öte yandan, value özelliği genellikle benzersiz olmalıdır, çünkü bu, bu seçenekler grubu için kullanıcının seçimini temsil etmek için kullanılan değerdir.

checked Kullanımı

Önceki örneklere bakarsanız, radyo düğmelerinin hiçbirinin varsayılan olarak işaretlenmediğini fark edeceksiniz. Onay kutuları için bu mantıklı olabilir, ancak radyo düğmeleriyle genellikle kullanıcıyı seçeneklerden birini seçmeye zorlamak istersiniz. Bu elbette doğrulama ile yapılabilir, ancak seçeneklerden birini önceden kontrol etmek çok daha kolaydır. Bu çok basit – sadece checked özelliği kullanın:

İkinci radio düğmesine “checked” kelimesini nasıl eklediğime dikkat edin – şimdi bu, kullanıcının seçimi değiştirmesine izin verecek şekilde baştan kontrol edilecek, ancak temelde seçeneklerden herhangi birini SEÇMEMESİ imkansız hale getirecek.