Ders-9) DROPDOWN LİST(Aşağı Açılır liste)

yorumsuz
584 kez okundu

Kullanıcının bilgilerini input type ve textarea komutları sayesinde sayfaya girmesini sağlamıştık. Şimdi kullanıcının gireceği bilgileri kısıtlamak isteyebiliriz. Örneğin gireceği yaş bilgisinin 18 ile 65 arasında olmasını isteyebiliriz ya da doğum tarihi bilgisini kendisinin girmesini değilde kendisinin bizim açacağımız bir pencereden seçmesini isteyebilir.Bunun için select html elementi kullanacağız. select html elementinin option, optgroup, label, selected gibi öğeleri kullanabilir.

“option” ÖĞESİ: select html komutu içine yazacağımız optionlar(seçenekler) kullanıcıya seçmesini istediğimiz listeyi hazırlamamız için kullanılır.

Örnek olarak ayların isimlerini aşağı açılır kutu haline getirip kullanıcının bu aylardan birine tıklamasını sağlayalım. Bunun için aşağıdaki kodları HTML kod sayfamızın <body>…</body> tag’ları arasına yazalım.

ilk kod

Bu kodları yazıp programı çalıştırdığımızda;

ilk site

gibi bir çıktı alacağız. Görüldüğü üzere ayları kullanıcının içerisinden seçebileceği bir aşağı açılır kutu haline getirdik.

“optgroup” ÖĞESİ: “optgroup” öğesi, tıpkı “option” aşağı açılır kutu içine yazı yazmamızı sağlar fakat “optgroup” ile yazdığımız yazılar bir seçim öğesi değil seçimleri gruplandırmak için birer başlık görevini görür. Ay örneğindeki seçebileceğimiz seçenekler az ama bir alışveriş sitesindeki oyunlardan birini oynamak istediğimizde oyun sayısının çokluğundan dolayı tüm oyunlar tek tek yazılmak yerine başlıklar altında birleştirilmiş olarak karşımıza çıkar. Örneğin “Oyunlar” başlığı altındaki “Consol Oyunları” başlığındaki “Silah Oyunları”nı seçmemiz gerekebilirdi. Peki programcı bu sınıflandırmayı nasıl yaptı. Bizde bu sınıflandırmayı “Aylar”ın seçenekleri az olmasına rağmen burdan bi örnek yapalım. Ayları mevsimlere göre ayıralım. Bunun için kullanacağımız komut “optgroup” komutudur.Bu komut içine yazacağımız “option”larla sınıflandırmayı yapmış olacağız. Şimdi bu örneği kodlayalım.

optgroup-kod

Bu kodun ekran görüntüsü aşağıdaki gibidir.

optgroup-ekran

Seçebileceğimiz aşağı açılır bir kutu oluşması için <select> komutunu kullandık. Aşağı açılır kutuda ayların başlıklar halinde görünmesi için <optgroup> komutunu kullandık. Bu komut içinde başlığımızı belirlemek için label  komutunu kullandık. “Kış” başlığı altında aralık, ocak, şubat yazması için de <oprtgroup> komutunun içine yine <option> lar tanımladık. <select> in içinde <option> ların olması zorunlu fakat, <oprgroup> ların olması zorunlu değildir. Eğer <select> in içinde bir <optgroup> varsa, <optgroup> un içinde de <option> ların olması zorunludur!!

NOT-1) Eğer bu aylardan birinin seçili olarak sayfa yüklendiğinde gelmesini istiyorsak “selected” komutunu kullanabiliriz.

ÖRNEK: <option selected>Şubat</option> komutu sayfa ilk yüklendiğinde ay kısmında şubat ayının seçili olarak görünmesini sağlayacaktır.İstediğimizde diğer aylardan birini tekrardan seçebiliriz.

NOT-2)  <optgroup> lar seçim aracı olarak kullanılmaz, sadece gruplama içindir!!

Bir sonraki dersimizde “Seçim Elementleri” konusunu öğreneceğiz. Bir sonraki dersimizde görüşmek üzere,

İyi günler …:)

 

 

 


Sosyal Medyada Paylaş Facebook Twitter Google+
Etiketler: , , , , ,
Eklenme Tarihi: 24 Ekim 2015

Facebook Yorumları

Konu hakkında yorumunuzu yazın


Time limit is exhausted. Please reload the CAPTCHA.