Yakuza

Yakuza

WFN Üye
Konular
544
Mesajlar
544
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
HTML’de açılır liste oluşturmak için <select> etiketini, listedeki seçenekler için de <option> etiketini kullanın. Kullanıcı bir seçenek seçtiğinde seçilen değer <select> alanının içinde tutulur; alan bir form içinde gönderiliyorsa sunucuya name özniteliğinin değeriyle birlikte iletilir.

En küçük çalışan örnek şöyledir:

HTML: 
<label for="sehir">Şehir seçin:</label>
<select id="sehir" name="sehir">
    <option value="istanbul">İstanbul</option>
    <option value="ankara">Ankara</option>
    <option value="izmir">İzmir</option>
</select>

Bu kodda label metni listeyi açıklar. for="sehir" değeri, select etiketindeki id="sehir" değeriyle eşleştiği için kullanıcı etikete tıklayarak da listeye odaklanabilir. value değerleri kullanıcıya gösterilen metinden farklı olabilir; form gönderildiğinde sunucuya gönderilen bilgi bu değerlerdir.

Açılır listeyi sayfaya ekleme​


HTML dosyanızda açılır listenin görünmesini istediğiniz yere <select> etiketini yazın ve seçenekleri içine <option> olarak ekleyin. Her option için kullanıcıya gösterilecek metni kapanış etiketlerinin arasına, gönderilecek değeri ise value özniteliğine yazın.

Örneğin aşağıdaki listede kullanıcı üç seçenekten birini görür; ancak form gönderildiğinde value içindeki kısa değer iletilir:

HTML: 
<label for="paket">Paket seçin:</label>
<select id="paket" name="paket">
    <option value="standart">Standart paket</option>
    <option value="profesyonel">Profesyonel paket</option>
    <option value="kurumsal">Kurumsal paket</option>
</select>

Kullanıcının bir seçenek seçmesini zorunlu tutmak istiyorsanız, başlangıçta açıklama görevi gören seçeneği boş değerle ekleyip required kullanabilirsiniz:

HTML: 
<label for="paket">Paket seçin:</label>
<select id="paket" name="paket" required>
    <option value="">Bir paket seçin</option>
    <option value="standart">Standart paket</option>
    <option value="profesyonel">Profesyonel paket</option>
    <option value="kurumsal">Kurumsal paket</option>
</select>

Burada value="" olan ilk seçenek yalnızca yönlendirici metindir. Kullanıcı bu seçenekte bırakırsa tarayıcı formun gönderilmesini engeller. Ancak bu kontrol, sunucu tarafında doğrulama yapılması gereğini ortadan kaldırmaz; gönderilen değer yine sunucuda kontrol edilmelidir.

Form gönderildiğinde seçilen değeri almak​


Açılır listeyi bir form içinde kullanacaksanız name özniteliğini ekleyin. Form gönderildiğinde tarayıcı, seçili seçeneğin value değerini bu adla gönderir.

HTML: 
<form action="/tercih-kaydet" method="post">
    <label for="dil">Programlama dili:</label>
    <select id="dil" name="dil" required>
        <option value="">Seçim yapın</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </select>

    <button type="submit">Kaydet</button>
</form>

Kullanıcı JavaScript seçeneğini belirleyip formu gönderirse sunucuya gönderilen alan mantıksal olarak dil=javascript olur. Sunucu bu değeri alıp kaydetme, filtreleme veya başka bir işlem için kullanabilir. Formun gönderilebilmesi, değerin uygulamanız için geçerli olduğunu kanıtlamaz; sunucu, yalnızca izin verilen değerleri kabul etmelidir.

Başlangıçta belirli bir seçeneği seçmek​


Sayfa açıldığında belirli bir seçeneğin seçili gelmesini istiyorsanız, ilgili option etiketine selected ekleyin:

HTML: 
<label for="tema">Tema:</label>
<select id="tema" name="tema">
    <option value="acik">Açık</option>
    <option value="koyu" selected>Koyu</option>
</select>

Bu örnekte liste ilk açıldığında “Koyu” seçilidir. Kullanıcı başka bir seçim yapmadan formu gönderirse gönderilecek değer koyu olur. Zorunlu seçim için boş bir başlangıç seçeneği kullanıyorsanız aynı anda rastgele bir seçeneği selected yapmak, kullanıcının seçim yapmadan form göndermesini engelleme amacına ters düşer.

Birden fazla seçim yapılmasına izin verme​


Kullanıcının aynı listeden birden fazla seçenek seçmesi gerekiyorsa multiple özniteliğini ekleyin. Kullanıcı masaüstünde genellikle Ctrl veya Command tuşuyla, dokunmatik cihazlarda ise cihazın arayüzüne göre birden fazla seçim yapar.

HTML: 
<label for="konular">İlgilendiğiniz konular:</label>
<select id="konular" name="konular[]" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="erişilebilirlik">Erişilebilirlik</option>
</select>

Birden fazla değer gönderileceği için name="konular[]" biçimi, birçok sunucu tarafı teknolojisinde verinin dizi olarak ele alınmasını kolaylaştırır. Sunucu tarafında yine boş liste, tekrarlanan değer veya izin verilmeyen değer kontrolü yapılmalıdır.

Seçenekleri gruplandırma ve devre dışı bırakma​


Uzun listelerde seçenekleri optgroup ile gruplandırabilirsiniz. Kullanılamayan bir seçenek için disabled kullanılır; bu seçenek görünür ancak seçilemez.

HTML: 
<label for="urun">Ürün seçin:</label>
<select id="urun" name="urun">
    <option value="">Seçim yapın</option>
    <optgroup label="Web teknolojileri">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
    </optgroup>
    <optgroup label="Programlama dilleri">
        <option value="javascript">JavaScript</option>
        <option value="python" disabled>Python - geçici olarak kullanılamıyor</option>
    </optgroup>
</select>

optgroup içindeki label değeri kullanıcıya kategori başlığı olarak gösterilir. disabled eklenen Python seçeneği gönderilecek bir seçim olamaz; fakat sunucunun yalnızca arayüzdeki kısıtlamaya güvenmemesi gerekir.

select ile datalist arasındaki fark​


Kullanıcının yalnızca önceden belirlediğiniz seçeneklerden birini seçmesini istiyorsanız select kullanın. Kullanıcıya öneriler sunup kendi değerini de yazmasına izin vermek istiyorsanız datalist daha uygundur.
YapıKullanım amacıKullanıcının kendi değerini yazması
selectTanımlı seçeneklerden seçim yaptırırHayır
datalistYazarken öneri gösterirEvet
Örneğin ülke alanında yalnızca izin verilen ülkelerin seçilmesi gerekiyorsa select kullanın. Arama kutusunda şehir adını yazarken öneriler göstermek, ancak listede olmayan bir aramayı da kabul etmek istiyorsanız datalist tercih edebilirsiniz:

HTML: 
<label for="arama">Şehir arayın:</label>
<input id="arama" name="arama" list="sehir-onerileri">

<datalist id="sehir-onerileri">
    <option value="İstanbul">
    <option value="Ankara">
    <option value="İzmir">
</datalist>

Bu örnekte kullanıcı önerilen şehirlerden birini seçebilir veya başka bir metin yazabilir. Dolayısıyla datalist tek başına geçerli bir şehir seçildiğini kanıtlamaz; uygulama bu alanı kullanmadan önce girilen metni ayrıca doğrulamalıdır.

Görünümü değiştirme ve sonucu kontrol etme​


Açılır listenin genişliği, yazı boyutu veya kenarlığı CSS ile değiştirilebilir. Önce HTML yapısını doğru kurun; ardından CSS ile görünümü düzenleyin:

HTML: 
<style>
    select {
        width: 220px;
        padding: 8px;
        font-size: 16px;
    }
</style>

<label for="sehir">Şehir:</label>
<select id="sehir" name="sehir">
    <option value="istanbul">İstanbul</option>
    <option value="ankara">Ankara</option>
</select>

Sayfayı tarayıcıda açtığınızda listeye tıklayarak seçeneklerin göründüğünü kontrol edin. Form kullanıyorsanız bir seçenek belirleyip formu gönderin ve sunucu tarafında beklediğiniz name ile value değerlerinin alındığını doğrulayın. Liste açılmıyor veya seçim gönderilmiyorsa önce şu noktaları kontrol edin:
  • select etiketinin doğru kapatıldığını ve option etiketlerinin onun içinde bulunduğunu kontrol edin.
  • Etiketin for değeri ile listenin id değerinin aynı olduğundan emin olun.
  • Form verisinin alınabilmesi için name özniteliğinin bulunduğunu kontrol edin.
  • Sunucuda, kullanıcının seçtiği value değerinin gerçekten kabul edilen seçenekler arasında olup olmadığını doğrulayın.

Sık sorulan sorular​

Açılır listede ilk seçeneği nasıl seçili getiririm?​

İlgili option etiketine selected ekleyin. Ancak required ile zorunlu seçim yaptırmak istiyorsanız ilk seçeneği boş değerli bir yönlendirme seçeneği olarak bırakın ve gerçek bir seçeneği varsayılan olarak seçmeyin.

Açılır listede görünen metin ile gönderilen değer farklı olabilir mi?​

Evet. Kullanıcıya gösterilen metni option etiketinin içeriğine, forma gönderilecek değeri value özniteliğine yazabilirsiniz. Örneğin “İstanbul” görünen bir seçenek için value="34" kullanılabilir.

Açılır listede arama yapılabilir mi?​

Yerleşik select yapısı uzun listelerde tarayıcıya göre sınırlı klavye araması sağlayabilir; ancak tam bir arama kutusu sunmaz. Arama ve serbest metin gerekiyorsa input ile datalist kullanabilir veya bunu sağlayan bir arayüzü ayrıca geliştirmeniz gerekir.

Açılır listeyi JavaScript olmadan oluşturabilir miyim?​

Evet. Seçim yaptıran temel açılır liste için HTML’de select ve option etiketleri yeterlidir. Seçime göre başka alanları anında değiştirmek gibi etkileşimler gerektiğinde JavaScript eklenir; formun sunucuya gönderilmesi için ise JavaScript zorunlu değildir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)