Merhabalar dostlar; html derslerimizin 15. Haftasında yeniden sizinleyim; bu hafta beraber formlarda seçim kutularını, özelliklerini ve tüm detaylarını göreceyiz.
Seçim kutuları nedir?
Açılır menü seçim kutuları (Select), formlarda kullanıcının önceden belirlenmiş bir listeden seçim yapmasına olanak tanıyan HTML öğeleridir. Kullanıcı dostu arayüzler oluşturmak için oldukça faydalıdırlar ve anketler, kayıt formları, ürün seçimleri gibi birçok alanda kullanılabilirler.
Oluşturma:
Açılır menü seçim kutusu oluşturmak için <select> etiketi kullanılır. Bu etiketin içinde, her bir seçenek için bir <option> etiketi bulunur.
HTML
<select name="sehir">
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
</select>
Özellikler:
- name: Seçilen değerin form gönderildiğinde gönderileceği isim.
- id: Seçiciyi tanımlamak için kullanılır.
- disabled: Seçeneği devre dışı bırakır.
- multiple: Birden fazla seçeneğin seçilmesine izin verir.
- size: Görünen seçenek sayısını belirler.
- selected: Varsayılan olarak seçili olacak seçeneği belirler.
Örnekler:
- Ülke Seçimi:
HTML
<select name="ulke">
<option value="TR">Türkiye</option>
<option value="DE">Almanya</option>
<option value="FR">Fransa</option>
</select>
HTML
<select name="renk">
<option value="red">Kırmızı</option>
<option value="green">Yeşil</option>
<option value="blue">Mavi</option>
</select>
Optgroup Kullanımı:
Seçenekleri kategorilere ayırmak için <optgroup> etiketi kullanılabilir.
HTML
<select name="urun">
<optgroup label="Elektronik">
<option value="telefon">Telefon</option>
<option value="bilgisayar">Bilgisayar</option>
</optgroup>
<optgroup label="Beyaz Eşya">
<option value="buzdolabi">Buzdolabı</option>
<option value="camasirMakinesi">Çamaşır Makinesi</option>
</optgroup>
</select>
JavaScript ile Etkileşim:
JavaScript kullanılarak açılır menü seçim kutularıyla dinamik etkileşimler kurulabilir. Örneğin, bir seçeneğin seçilmesine bağlı olarak başka bir seçeneğin içeriğini değiştirebilirsiniz.
Açılır menü seçim kutuları, HTML formlarında kullanımı kolay ve işlevsel bir araçtır. Farklı özellik ve seçenekler ile çeşitli kullanım alanlarına uyarlanabilirler.
Bu haftayıda böylelikle sizlerle tamamladık, 16. Haftada görüşmek üzere esenlikler dilerim.