جاري التحميل...

Select في HTML

الدرس السابق textarea للنص الحر متعدد الأسطر. select مهمة أخرى: اختيار إجابة من قائمة ثابتة بدل الكتابة الحرة.

لماذا يوجد select

نماذج الشحن والوجبات والإعدادات تحتاج مجموعة مغلقة. الكتابة العشوائية تفسد البيانات؛ اختيار teh من قائمة لا. select هو التحكم؛ كل option خيار. ما زلت تحتاج label وname على select.

إجابة مباشرة

1) select مع option. 2) اربط label. 3) name على select وvalue على option. 4) اختياري: خيار فارغ وselected وdisabled وoptgroup. 5) اختيار من قائمة — وليس فقرات textarea.

📊 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

نموذج شحن: select مدينة

ملاحظة التسليم input أحادي والسدينة select. خيار Choose فارغ أولاً. أكواد teh/isf تُرسل.

Labeled city select

html

<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>

قراءة مثال المدينة

التحكم قائمة select لا textarea
id يطابق label
name مفتاح الاختيار
لكل option قيمة قصيرة
value فارغ يمنع افتراضياً عرضياً
required حتى تُختار مدينة
الملاحظة input أحادي

وجبات مع optgroup

مثال ثانٍ بقسمي Veg وOther. selected افتراضي؛ disabled لغير المتاح.

Meal select with optgroup

html

<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>

قراءة مثال الوجبة

optgroup عنوان قسم وليس قيمة مرسلة
value من option المختار
selected على Soup
disabled على Grill
label وname دائماً
التالي: datalist للاقتراح مع الكتابة

اختيار select مقابل textarea وinput

خيار معروف: select
فقرات حرة: textarea
سطر مكتوب: input
name على select؛ value على option
دائماً label
لا تضع القائمة داخل textarea

تمرين — البناء والتجميع

أضف مدينة رابعة
غيّر نص Choose وأبقِ value فارغاً
جرّب بدون required ثم أعده
انقل Soup بين المجموعات
جرّب disabled على Grill
جملة: select يرسل value؛ textarea نص حر
الاقتراحات المكتوبة لـ datalist التالي

أخطاء شائعة

بلا value عندما تريد رمزاً
نسيان name
بلا label
خيارات داخل textarea
قائمة طويلة بلا optgroup
name على كل option
الخلط مع datalist

ملخص

select + option = اختيار من قائمة
label وname على select
value للخيار يُرسل
اختياري prompt وselected وdisabled وoptgroup
ليس نصاً حراً متعدد الأسطر
التالي: datalist

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى