Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragraflar
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Kapsamlı Referanslar
  • HTML Dilin Tüm Etiketleri Ve Özellikleri
  • Diğer dersler
  • HTML Yazı Arası Boşluk
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Araştırma

HTML Onay Kutuları

önceki ders sonraki ders
Sayfa içeriği
  • › Onay kutusu konsepti
  • › Onay kutusu eklemek

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>
kod dene 

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>
kod dene 

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>
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.

Ankara Lastik Tamiri