Menu
Coddy logo textTech

Onay Kutuları

Coddy'nin HTML Journey'sinin Temeller bölümünün bir parçası. Ders 42 / 60.

HTML'de onay kutuları, kullanıcının gruptan birden fazla seçenek belirleyebileceği bir seçenek kümesi oluşturmak için kullanılır. Onay kutuları, <input> etiketiyle ve type niteliği "checkbox" olarak ayarlanarak oluşturulur.

HTML'de bir onay kutusu oluşturmak için temel sözdizimi şöyledir:

<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: Giriş alanını tanımlayan etiket.
  • type="checkbox": Giriş türünü bir onay kutusu olarak belirten öznitelik.
  • id: Onay kutusuna benzersiz bir tanımlayıcı veren öznitelik.
  • name: Onay kutularını bir araya getiren bir özniteliktir. Radyo düğmelerinin aksine, aynı isme sahip birden fazla onay kutusu aynı anda seçilebilir.
  • value: Onay kutusuyla ilişkili değeri belirten bir özniteliktir. Bu değer, form gönderildiğinde sunucuya iletilir.
  • <label>: Onay kutusu için tıklanabilir bir etiket sağlayan etikettir. Etiketin for özniteliği, onay kutusunun id özniteliği ile eşleşmelidir.

İşte bir onay kutusu grubu oluşturmaya yönelik bir örnek:

<form>
	<input type="checkbox" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label><br>
	
	<input type="checkbox" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label><br>
	
	<input type="checkbox" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label><br>
</form>

Bu örnekte, aynı name özniteliğini ("mygroup") paylaştıkları için hepsi aynı gruba ait olan üç onay kutusuna sahip bir formumuz var. Her onay kutusunun benzersiz bir id'si ve value'su ile buna karşılık gelen bir etiketi vardır. Kullanıcı bu seçeneklerden birini veya daha fazlasını seçip formu gönderdiğinde, seçilen onay kutularının değerleri sunucuya gönderilir.

challenge icon

Görev

Kolay

Bir onay kutusu grubu içeren bir HTML belgesi oluşturun. Form aşağıdaki öğelere sahip olmalıdır:

  1. Bir <form> etiketi.
  2. Formun içinde, name değeri "toppings" olan üç onay kutusundan oluşan bir grup oluşturun.
  3. İlk onay kutusunun id değeri "cheese", value değeri "cheese" ve metni "Cheese" olan bir etiketi olmalıdır.
  4. İkinci onay kutusunun id değeri "pepperoni", value değeri "pepperoni" ve metni "Pepperoni" olan bir etiketi olmalıdır.
  5. Üçüncü onay kutusunun id değeri "mushrooms", value değeri "mushrooms" ve metni "Mushrooms" olan bir etiketi olmalıdır.
  6. Satır sonu oluşturmak için her etiketin ardından bir <br> etiketi ekleyin.

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <!-- Kodunuzu buraya yazın -->
    </body>
</html>
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Temeller bölümündeki tüm dersler

Kendi başına pratik yap: Web playground