Yükleniyor...

HTML Select

Önceki derste textarea serbest çok satırlı metindi. Select farklı iş: sabit listeden bir cevap seçmek — serbest yazmak değil.

select neden var

Kargo, yemek ve ayarlar kapalı küme ister. Serbest yazım veriyi bozar; listeden teh seçmek bozmaz. select denetimdir; her option bir seçenek. Hâlâ select'te label ve name gerekir.

Doğrudan yanıt

1) option'lı select. 2) label bağlayın. 3) name select'te; value option'da. 4) İsteğe bağlı boş seçenek, selected, disabled, optgroup. 5) Liste seçimi — textarea paragrafı değil.

📊 Select pieces beginners use

Piece	Role	Beginner tip
select	Choice container	Owns name= for the submitted field key
option	One choice	value= is what posts; text is what users see
optgroup	Section header	Groups options; not itself submitted
name (on select)	Submit key	Required if the choice should post
id (on select)	Label hook	Match label for=
value (on option)	Submitted token	Prefer short stable codes (teh, salad)
selected	Default pick	At most one in a single-select list
disabled (option)	Unavailable	Shown but not choosable

Kargo: şehir select

Teslim notu tek satır input; şehir select. Önce boş Choose. teh/isf kodları gönderilir.

Labeled city select

html

HTML Code

<form action="/ship" method="post">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Choose…</option>
<option value="teh">Tehran</option>
<option value="isf">Isfahan</option>
<option value="shir">Shiraz</option>
</select>

<label for="note">Delivery note</label>
<input id="note" name="note" type="text" placeholder="Gate code, floor…">

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

Şehir demosunu okuyun

Liste denetimi select, textarea değil
id label for ile eşleşir
name gönderim anahtarıdır
Her option kısa value
Boş value rastgele varsayılanı önler
required gerçek şehre kadar
Not tek satır input

optgroup ile yemek

İkinci demo Veg/Other. selected varsayılan; disabled tükenmiş için.

Meal select with optgroup

html

HTML Code

<label for="meal">Meal</label>
<select id="meal" name="meal">
<optgroup label="Veg">
<option value="salad">Salad</option>
<option value="soup" selected>Soup</option>
</optgroup>
<optgroup label="Other">
<option value="stew">Stew</option>
<option value="grill" disabled>Grill (sold out)</option>
</optgroup>
</select>

Yemek demosunu okuyun

optgroup bölüm başlığı; gönderilmez
value seçilen option'dan gelir
Soup'ta selected
Grill'de disabled
Her zaman label ve name
Sonraki: yazarak öneri için datalist

select vs textarea vs input

Bilinen liste: select
Serbest paragraflar: textarea
Kısa satır: input
name select'te; value option'da
Her zaman label
Listeyi textarea'ya yazmayın

Alıştırma — kurun ve gruplayın

Dördüncü şehir kısa value
Choose metnini değiştirin; value boş kalsın
required'ı kaldırıp geri koyun
Soup'u gruplar arası taşıyın
Grill disabled deneyin
Cümle: select value gönderir; textarea serbest metin
Yazarak öneriler sonraki datalist'te

Kolay hatalar

Kod isterken value yok
select'te name unutmak
label yok
Seçenekler textarea içinde
optgroup'suz uzun liste
Her option'da name
datalist ile karıştırmak

Özet

select + option = listeden seçmek
select'te label ve name
option value gönderilir
İsteğe bağlı prompt, selected, disabled, optgroup
Serbest çok satırlı metin değil
Sonraki: datalist

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil