Menu
Coddy logo textTech

Radyo Düğmeleri

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

HTML'de radyo düğmeleri, kullanıcının gruptan yalnızca bir seçenek seçebileceği, birbirini dışlayan seçeneklerden oluşan bir küme oluşturmak için kullanılır. Radyo düğmeleri, <input> etiketi ve type özniteliğinin "radio" olarak ayarlanmasıyla oluşturulur.

HTML'de bir radyo düğmesi oluşturmak için temel sözdizimi şöyledir:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: Giriş alanını tanımlayan etiket.
  • type="radio": Giriş türünü radyo düğmesi olarak belirten bir öznitelik.
  • id: Radyo düğmesine benzersiz bir tanımlayıcı veren bir öznitelik.
  • name: Radyo düğmelerini bir araya getiren bir öznitelik. Aynı isme sahip tüm radyo düğmeleri aynı gruba aittir ve bir grup içinde aynı anda yalnızca bir seçenek seçilebilir.
  • value: Radyo düğmesiyle ilişkili değeri belirten bir öznitelik. Bu değer, form gönderildiğinde sunucuya gönderilir.
  • <label>: Radyo düğmesi için tıklanabilir bir etiket sağlayan bir etikettir. Etiketin for özniteliği, radyo düğmesinin id özniteliği ile eşleşmelidir.

Bir radyo düğmesi grubunun nasıl oluşturulacağına dair bir örnek:

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" 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 üç radyo düğmesine sahip bir formumuz var. Her radyo düğmesinin benzersiz bir id ve value değeri ile karşılık gelen bir etiketi vardır. Kullanıcı bu seçeneklerden birini seçip formu gönderdiğinde, seçilen radyo düğmesinin değeri sunucuya gönderilir.

challenge icon

Görev

Kolay

Bir grup radyo düğmesi içeren bir formun bulunduğu bir HTML belgesi oluşturun. Form aşağıdaki öğelere sahip olmalıdır:

  1. Adı "color" olan üç radyo düğmesinden oluşan bir grup.
  2. İlk radyo düğmesinin id değeri "red", value değeri "red" ve etiketi "Red" metnine sahip olmalıdır.
  3. İkinci radyo düğmesinin id değeri "green", value değeri "green" ve etiketi "Green" metnine sahip olmalıdır.
  4. Üçüncü radyo düğmesinin id değeri "blue", value değeri "blue" ve etiketi "Blue" metnine sahip olmalıdır.
  5. Satır sonu oluşturmak için her etiketten sonra 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