Form Select ile CSS, JavaScipt, PHP ve Optgroup Kullanımı

Yeni web trendleri günden güne değişiyor. Özellikle form elemenları büyük ve sade olması hem tasarım hem de kullanılık bakımından çok önemli bir ayrıntı. Bir proje üzerinde çalışırken HTML form elemanlarından <select> etiketi üzerinde bazı düzenlemeler yapmam gerekti ufak tefek problemler ve çözümler, CSS düzenlemeleri derken bu konuda Google ‘da arama yaptığımda select ve option hakkında tam anlamıyla bir döküman olmadığını fakettim ve bu makaleyi yazmaya karar verdim.

HTML

İlk olarak en yalın haliyle bir Select Menü (Sekme Menü) oluşturalım;

<select name="secenekler">
<option value="1" selected="selected">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>

Kodları test etmek için tıklayınız.

Yukarıda  gördünüz gibi bir sekme oluşturduk ve option ile 5 adet seçenek sunduk. <select> etiketine sadece name parametresini Kullandım. Bu etiket  <option> etiketindeki seçeneklerden hangisi seçilmiş ise onun değerini value parametresi alacılığı ile sever tabanlı bir programlama diline (PHP, ASP vb..) göndermenize ve işlenizi sağlıyor  (PHP başlığında açıklayacağım).

Name parametrisi haricinde <select> etikeinde kullanabileceğiniz bir çok parametre bulunmakta bunları kısaca açıklamak gerekirse;

• id → <select> etiketine benzersiz bir isim vermenizi sağlar (özellikle javaScript için kullanılır)
• class → CSS sınıfı tanımlamanız için kullanılır
• style → Direk CSS etiketleri girmeniz için kullanılır
• title → <select> hakkında bilgi veya başlık belirtmek için kullanılır (özellikle SEO çalışmalarına katkıda bulunur)
• lang → <select> içerisindeki verilerin dilini (lisanını) belirtmek için kullanılır
• dir → <select> listesini açmak için kullanılan buttonu (sağ taraftaki üçgen şeklindeki araç) sağa veya sola taşınmanızı sağlar
• size → Satır sayısını belirtmek için kullanılır (fakat CSS ile bu işlem çok daha başarılı bir şekilde yapıldığı için gereksizdir)
• multiple → Tek seçenek sınırlamasını kaldırarak birden fazla seçenek seçmenizi sağlar
• disabled → Select menünüzü pasif durumuna getirmek için kullanılır
• tabindex → Varsayılan seçeneği belirtmenizi sağlar.

CSS

Yukarıda 5 seçenekli sade bir Select Menü oluşturmuştuk. Şimdi bu Sekme Menüyü CSS Class oluşturarak standartların dışında farklı bir görünüme taşıyacağız.

Makalenin ilk başında bir proje üzerinde çalışırken bu konuda bir yazı yazma kararı aldım demiştim. Bahsi geçen projede ki Sekme Menüyü beraber adım adım tasarlayalım;
Buradan çalışmaya bakabilirsiniz : http://www.sabah.de/tr/sari-sayfalar

ilk olarak bir div oluşturuyoruz ve select-menu isminde bir class atıyoruz. Sonra div ‘in içine select menümüzü ekliyoruz

<div>
<select name="secenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</div>

ve CSS kodlarımızı yazmaya başlıyoruz;

<style type="text/css">
<!--
.select-menu{
background:url(select-background.jpg) no-repeat;
width:250px;
height:30px;
padding-left:440px;
padding-top:215px;
}
.select-menu select {
width:250px;
height:30px;
padding:5px;
padding-left:1px;
font-weight:bold;
font-size:12px;
color:#223C75;
background:#f1f1f1;
border:1px #666666 solid;
}

.select-menu select option{
padding:3px;
}
-->
</style>

Kodları test etmek için tıklayınız.

select-menu CSS klası ile <select> ve <option> etiketlerini yeniden boyutlandırdık, yazı renklerini ve boyutlarını değiştirdik ayrıca bazı ufak ayrıntılarla standart görünümünde kurtardık.

JAVASCRIPT

<select> etiketi javaScript ile en sık kullanılan HTML form öğelerindendir ve bünyesinde bir çok javaScipt olayı barındırır.

• onclick →    <select> etiketini fare (mouse) ile tıklandığında tetikler.
• ondblclick →    <select> etiketini fare (mouse) ile çift tıklandığında tetikler.
• onmousedown →    Fare (mouse) sol tuşuna basıldığında tetikler.
• onmouseup →    Basılı olan fare (mouse) tuşu bırakıldığında tetikler.
• onmouseover →    <select> etiketinin üzerine fare ile gelindiğinde tetikler.
• onmousemove →    <select> etiketinin üzerinde fare ile hareket edildiğinde tetikler.
• onmouseout →   <select> etiketinin üzerine fare ile üzerine gelinip sonra çıkıldığında tetikler.
• onkeypress →   <select> etiketinin üzerine fare ile üzerindeyken klavyeden bir tuşa basıldığında tetikler.
• onkeydown →    <select> etiketinin üzerindeyken klavyeden bir tuşa ilk basıldığı anda tetikler.
• onkeyup →   <select> etiketinin üzerindeyken basılı olan klavye tuşu bırakıldığında tetikler.
• onfocus →   <select> etiketi seçildiğinde (odaklanıldığında) tetikler.
• onblur →    select> etiketi seçilip başka bir işleme geçildiğinde tetikler.
• onchange →   select> etiketi içeriği değiştiğinde tetikler.

Şimdi onChange olayını kullanarak select menümüzü harekete geçirelim;

<div>
<form method="post">
<select name="secenekler" onChange="submit();">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

javaScript submit fonksiyonunu onChange olayı ile kullanarak select menüde bir değişiklik olduğunda form ‘u sanki submit buttonuna tıklamış gibi hareket ettirmiş olduk.

PHP

HTML bölümünde bahsettiğim gibi <select> etiketine name parametresi ile secenekler adında bir değişken atamıştık şimdi PHP kodları ile secenekler ‘den gelen bilgiyi ekrana yazdıralım;

<?php
$secenek = $_POST['secenekler'];
echo '<br />az önce <strong>' . $secenek . '</strong> numarali seçeneği seçtiniz...<br /><br />';
?>

Kodları test etmek için tıklayınız.

Formumuzu post metodu ile gönderdiğimiz için PHP $_POST fonksiyonu ile formdan gelen bilgiyi alıp ekrana yazdırıyoruz.

OPTFROUP

Select etiketini herşeyiyle bahsetmişken son olarak optgroup ‘dan da bahsederek bu konuyu bitirelim. optgroup select menünüzdeki option listenizi gruplara ayırmaya yarayan çok kullanışlı bir HTML etiketidir.

Optgroup kullanım şekli;

<div>
<form method="post" name="ornekForm">
<select name="secenekler" onChange="submit();">
<optgroup label="Seçenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</optgroup>
<optgroup label="Diğer Seçenekler">
<option value="6">6. Seçenek</option>
<option value="7">7. Seçenek</option>
<option value="8">8. Seçenek</option>
<option value="9">9. Seçenek</option>
<option value="10">10. Seçenek</option>
</optgroup>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

Kodları test ettiğinizde listenin seçenekler ve Diğer Seçenekler adında iki gruba ayrıldığını göreceksiniz.

Sanırım <select> etiketi hakkında bahsedilecek başka bir konu kalmadı.

Makalede geçen örneklerin hepsini aşağıdan bilgisayarınıza indirerek inceleyebilirsiniz.
Download : Select-kullanimi.zip (161)

Ayrıca W3 orjinal sitesinden <select> hakkında kurumsal bilgi edinebilirsiniz.
http://www.w3schools.com/tags/tag_select.asp