HTML select alanında boş seçenek nasıl yönetilir?

Mehmet · Dün 21:58 da

HTML select alanında boş seçenek nasıl yönetilir?

Tek seçimli, multiple olmayan ve görüntü boyutu 1 olan geleneksel select alanında, başlangıçta geçerli seçim sayılmayan yer tutucu için ilk option öğesinde value="" kullanın. Bu option doğrudan select altında bulunmalıdır. Alanın doldurulması gerekiyorsa select üzerine required ekleyin ve boş seçeneği disabled selected olarak tanımlayın. Tarayıcının yerleşik doğrulaması etkinse kullanıcı gerçek bir seçenek seçmeden normal gönderim engellenir. novalidate veya programatik gönderim bunu aşabilir; sunucu doğrulaması zorunludur.

Boş seçenek nasıl çalışır?

Boş seçenek, kullanıcıya hangi değeri seçmesi gerektiğini anlatan bir yer tutucu olarak kullanılabilir. Örneğin "Bir şehir seçin" metni ekranda görünür; ancak bu seçeneğin değeri boş olduğu için form açısından geçerli kabul edilmez.

En küçük çalışır örnek:

Kod:

<style>input, select, textarea, button, details { border-radius: 4px; }</style>
<form action="/form" method="post">
  <label for="city">Şehir</label>
  <select id="city" name="city" required>
    <option value="" disabled selected>Bir şehir seçin</option>
    <option value="istanbul">İstanbul</option>
    <option value="ankara">Ankara</option>
    <option value="izmir">İzmir</option>
  </select>
  <button type="submit">Gönder</button>
</form>

Bu örnekte beklenen sonuç, sayfa açıldığında Bir şehir seçin metninin görünmesidir. Kullanıcı şehir seçmeden gönder düğmesine basarsa tarayıcının yerleşik doğrulaması formun gönderilmesini engeller. Bir şehir seçildiğinde sunucuya örneğin city=ankara gönderilir.

Hangi durumda hangi tanım kullanılmalı?

Boş seçeneğin davranışı, alanın zorunlu olup olmamasına göre belirlenmelidir:

İhtiyaç	Boş seçenek	select niteliği	Sonuç
Kullanıcı mutlaka seçim yapmalı	`value="" disabled selected`	`required`	Boş seçim formu geçersiz kılar
Boş bırakmak geçerli	`value=""`	`required` kullanılmaz	Boş değer geçerli olarak gönderilebilir
Kullanıcı sonradan boş seçebilmeli	`value=""`	İsteğe bağlı	Boş seçenek yeniden seçilebilir

Boş seçim geçerli olacaksa

Örneğin bir filtrede “Tümü” seçeneği gerçekten geçerli bir durumsa bu seçeneği disabled yapmayın:

Kod:

<label for="category">Kategori</label>
<select id="category" name="category">
  <option value="" selected>Tüm kategoriler</option>
  <option value="book">Kitap</option>
  <option value="music">Müzik</option>
</select>

Bu durumda kullanıcı “Tüm kategoriler” seçeneğini bırakabilir. Sunucu tarafında boş değeri “filtre uygulama” anlamında yorumlamanız gerekir. Form verisini yalnız tarayıcı doğrulamasına bırakmayın; sunucu, boş veya beklenmeyen değeri ayrıca kontrol etmelidir.

Sık yapılan hatalar

Boş seçeneğe disabled ekleyip kullanıcının daha sonra seçimi temizlemesini beklemek. Temizleme mümkün olacaksa disabled kullanmayın.
required eklemeden boş value değerini zorunlu seçim sanmak. required yoksa tarayıcı boş seçime izin verir.
Yalnızca görünen metni kontrol etmek. Uygulama mantığında kontrol edilmesi gereken değer option içindeki value alanıdır.
Sunucu tarafında boş değeri doğrulamamak. Kullanıcı arayüzü doğrulaması atlanabileceği için sunucu gelen değeri izin verilen seçeneklerle karşılaştırmalıdır.

Örnek action yolları yalnızca yer tutucudur; sunucu uygulaması verilmemiştir. Çoklu seçim veya liste kutusunda boş değerin doğrulama davranışını bu tek seçimli örnekle eşitlemeyin. Yer tutucunun optgroup içine taşınması da belirtilen özel placeholder kuralını değiştirir. Düzenlemeyi klavye ile seçme, sıfırlama ve sunucudan geri dönen değerle yeniden gösterme durumlarında kontrol edin.

Sunucu eski bir seçimi yeniden gösterirken yalnız izin verilen değere selected eklemelidir; boş yer tutucu ile gerçek seçeneğin ikisini birden seçili üretmeyin. Tek seçimli bir alan için gönderilen diziyi veya bilinmeyen şehir kodunu da reddedin.

Sık sorulan sorular

Seçili seçeneği JavaScript ile nasıl kontrol ederim?

select.value === "" ifadesi, seçili seçeneğin boş değer taşıyıp taşımadığını kontrol eder. Bu kontrolü özel bir mesaj göstermek veya başka bir alanı etkinleştirmek için kullanabilirsiniz.

Boş seçenek form gönderiminde hangi değeri taşır?

Boş seçeneğin value değeri boşsa form verisinde ilgili alan boş değer taşır. Seçenek disabled ise başarılı form kontrolü olarak gönderilmez; sunucuda alanın hiç gelmemesi ile boş gelmesini ayrı durumlar olarak değerlendirin.

HTML select alanında boş seçenek nasıl yönetilir?

Mehmet