Sayfa içeriği
Onay kutusu konsepti
Onay kutusu, tıklandığında seçildiğini belirten bir onay işareti gösteren ve tekrar tıklandığında artık seçili olmadığını belirtmek için onay işaretinin kaybolduğu kare şeklinde bir düğmedir.
Genellikle, kullanıcının önüne birkaç seçeneği göstermek ve onlardan istediğini seçebilmesini ve hatta hepsini seçmesini sağlamak için onay kutularını kullanırız.
Onay kutusu eklemek
Bir onay kutusu eklemek için <input type="checkbox"> gibi <input /> etiketini kullanabilirsin.
Bu etikete aşağıdaki özellikleri ekleyebilirsin:
- id: <label> etiketi ile linklemek istersek <label> ekliyoruz.
- name: gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz
- value: Gönder butonuna tıklandığında gönderilecek değeri verir.
- disabled: soluk görünmesini ve değeri değişmez sağlamak için kullanılıyor.
- checked: sayfa açıldığında varsayılan olarak kontrol edilmesini sağlamak için checked ekliyoruz.
Teknik bilgi
kutunun yanında görüneceğin metin için, her zaman <label> etiketi ile yerleştir ve alana bağla, çünkü tarayıcı, kullanıcının ekli metni tıkladığında aynı kutuyu tıkladığını düşünecektir.
Aşağıdaki örnekte, her biri için farklı bir ad ve değere sahip üç onay kutusu ekledim.
- <input type="checkbox" id="tr" name="option1" value="turkish">
- <label for="tr">Türkçe</label><br>
- <input type="checkbox" id="en" name="option2" value="english">
- <label for="en">English</label><br>
- <input type="checkbox" id="jp" name="option3" value="japanese">
- <label for="jp">日本</label>
Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen üç onay kutusu görüntülüyoruz.
- <input type="checkbox" id="tr" name="option1" value="turkish" checked>
- <label for="tr">Türkçe</label><br>
- <input type="checkbox" id="en" name="option2" value="english">
- <label for="en">English</label><br>
- <input type="checkbox" id="jp" name="option3" value="japanese">
- <label for="jp">日本</label>
Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen ve ayrıca kullanıcının değerini değiştirememesi için etkin olmayan üç onay kutusu görüntüledim.
- <input type="checkbox" id="tr" name="option1" value="turkish" checked disabled>
- <label for="tr">Türkçe</label><br>
- <input type="checkbox" id="en" name="option2" value="english">
- <label for="en">English</label><br>
- <input type="checkbox" id="jp" name="option3" value="japanese">
- <label for="jp">日本</label>