CHECKBOX Metnini Tıklanabilir Yapmak

Web sitesi tasarlarken size yardımco olacak konulardan bir tanesi de checkbox seçimi ile birlikte metne de tıklandığında checkbox'ın aktif yada deaktif olmasıdır. Bu kısa makalede de bu problemi çözmek için iki yöntem vereceğim. Konu basit ve sadece nasıl yapıldığı gerekli olduğu için konuyu fazla uzatmadan nasıl yapıldığını ve kodları size vermek istiyorum.

Hepinizin bildiği gibi, daha doğrusu bu konuyu araştırıyorsanız html'de checkbox oluşturmak için input tagı kullanılır ve tür olarak da checkbox parametresi seçilir. Eğer web sitesi geliştirmek için, html destekli bir yazılım kullanıyorsanız input tagını yazdıktan sonra type yazarsanız zaten size seçenekleri de sunacaktır. 

Konunun başında bu makaleyi html konusuna yeni başlayanları da dikkate alarak checkboxların nasıl oluşturulduğunu anlatmayı gerekli gördüm.  Konumuzun amacı check'boxları tıklanabilir yapmak olduğu için bu konuya odaklanmak istiyorum. Artık kendi konumuza dönebiliriz...

Eğer sayfanıza yukarıda anlattığım şekilde input tagını kullanarak ve type olarak checkbox seçerseniz bir kutucuk eklenecektir. Bu kutunun içine gelirseniz ve tıklarsanız kutunun aktif veya deaktif olacağını göreceksiniz. Ama sadece bir kutucuk çoğu zaman anlamsızdır ve yaptığınız web sitesini kullanan insanlar da metnin üzerine de tıklayabilir. İşte bu işlemi yapmak için bu makalede 3 çözüm anlatacağım. İstediğiniz çözümü kullanmak size kalmış.

Bu çözümlerden birincisi input tagını label tagı içerisine yazmaktır. Yani görüntülemek yada tıklandığında checkboxın aktif yada deaktif olmasını sağlayamak için istediğiniz metni input içine değil label içine yazmak gerekiyor.

Not: Input içine zaten metin de giremezsiniz. Bu yüzden de metni mutlaka ayrı bir tag içerisinde yazmak zorundasınız.

Birinci yöntemimizi sanırım açıklayabildim. Ve bence en güzel açıklama da bunu kodlar içinde görmenizdir. Aşağıdaki örnek kodları siz de test edebilir ve projelerinizde kullanabilirsiniz.

<label><input type="checkbox" name="checkbox" value="value">CHECKBOX Metni Tıklanabilir Oldu Mu?</label>

CHECKBOX Metni Tıklanabilir Oldu Mu?

Bu işlem sorunsuzca çalışacaktır. Yani birinci yöntemi uygulamak istediğiniz gibi sorunu çözecektir. Bu işlemden sonra ise anlatacaklarım bu konuyu biraz daha öğrenmeniz ve belki de daha önce bilmediğinin for özelliğini kullanarak anlatacağım. For özelliğini kullanabilmek için checkbox içine id eklememiz gerekiyor. For özelliğini label içerisinde kullanıyoruz ve label içerisindeki metnin nereye ait olduğunu checkbox id'sini göstererek belirtiyoruz. Konuyu fazla uzatmamak ve kafanızı da karıştırmamak için bu yöntemin de örnek kodları ve uygulaması aşağıda yer alıyor. Buradan bakarak siz de kendi projenize uyarlayabilirsiniz.

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Checkbox Metnini Tıklanabilir Yapmak Kolay Mı?</label>

Checkbox Metnini Tıklanabilir Yapmak Kolay Mı?

Eğer konuyu okuyarak buraya kadar geldiyseniz size üçüncü bir yöntem daha anlatacağım. Bu yöntem ise tamamen CSS kullanarak checkbox metnini tıklanabilir yapmak için kullanılabilir. Bu yöntemi kullanmak içinse input tagının value özelliğini metin olarak gösterip tıklanabilir yapmak için yazılmıştır. Örnek uygulama için aşağıdaki kodları kullanabilirsiniz.

<input type="checkbox" value="Metin Bu İşlem Sonunda da Tıklanabilir Oldu" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Son olarak konuyu özetleyecek olursak checkbox metnini de tıklanabilir yapmak için makalede 3 yöntem anlatılmış, bunların açıklaması verilmiş ve örnek kodlar üzerinden anlatılarak kodların sonunda da çalışabildiğini test edilmiştir. Buradaki her iki yöntemi de sorunsuzca kullanabilirsiniz.
Eğer konuyla alakalı sorularınız, yapamadığını yer olursa sorabilirsiniz. En kısa sürede yanıtlamaya çalışacağım.