Html Optgroup Etiketi

 bcakir
 26 Kasım 2011

Merhaba arkadaşlar bu yazımda nadir olarak kullanılan faydalı bir Html etiketinden yani optgroup’dan bahsedeceğim. Açılan listeler yapmak için select ve option etiketlerini kullanıyoruz ama bu etiketlerle gruplama yapılamıyor. Bu listelerde gruplama yapmak için ise yazımızın konusu olan optgroup etiketi kullanılıyor. Bu etiket sayesinde kolayca anlaşılabilir listeler hazırlamamız mümkün. Şimdi bununla ilgili bir örnek uygulama yapalım. Örnek uygulamamızda araba listesinden seçim yaptıracağız. Kullanacağımız bu yeni etiket sayesinde ise arabaları ait olduğu markaya göre kolaylıkla gruplandırabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>Optgroup Etiketi</title>
<style>
select {width:250px; height:30px; padding:3px; font-weight:bold; background-color:yellow}
#otomobil optgroup {background-color:blue; color:#fff}
#otomobil optgroup option {background-color:#fff; color:#000}
</style>
</head>
<body>
<select id="otomobil" title="Seçim Yapınız">
	<optgroup label="Renault">
    	<option>Megane</option>
		<option>Kango</option>
    </optgroup>
	<optgroup label="Wolksvagen">
		<option>Passat</option>
		<option>Polo</option>
		<option>Golf</option>
        <option>Jetta</option>
    </optgroup>
	<optgroup label="Seat">
		<option>Cordoba</option>
		<option>Leon</option>
		<option>İbiza</option>
    </optgroup>
</select>
</body>
</html>

Yukarıda uygulamamızı yapmış oluk. Bu seçim kutusuna birazda stil ekledim. Siz kendinize göre düzenlemeler yapabilirsiniz. Yararlı bir etiketten bahsettiğimi düşünerek yazımı burada tamamlıyorum. Gelecek yazılarda görüşmek dileğiyle.

 963 Okunma

Bu yazıya 3 yorum yapılmış.

  1. Bu etiketi hiç bilmiyordum. Baya kullanşlıymış, teşekkür ederim yazınız için.

  2. Outgroup değil de optgroup olacak sanırım imla hatası yaptınız yazı başlığında 🙂
    kolay gelsin faydalı bir blog çalışması olmus bir kaç sayfayı imledim bile

    • Haklısınız, dikkatsiz davranmışım. Teşekkür ederim yorumunuz için.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css, Html/Html5
Kapat