Select در HTML
درس قبل textarea متن چندخطی آزاد بین تگ‌ها بود. select کار دیگری است: انتخاب یک جواب از فهرست ثابت — شهر، پلن، اندازه — نه نوشتن آزاد. ارسال یکدست‌تر می‌ماند.
چرا select هست
فرم ارسال، انتخاب غذا و تنظیمات به مجموعهٔ بسته نیاز دارند. تایپ پراکنده داده را شلوغ می‌کند؛ انتخاب teh از فهرست نه. select کنترل است؛ هر option یک گزینه. همچنان label و name روی select لازم است تا value انتخاب‌شده ارسال شود.
پاسخ مستقیم
۱) select با option تو در تو. ۲) label با for. ۳) name روی select؛ value روی option. ۴) اختیاری: گزینهٔ خالی، selected، disabled، optgroup. ۵) انتخاب از فهرست — نه پاراگراف 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 شهر با label
یادداشت تحویل input تک‌خطی و شهر select. اول Choose خالی تا انتخاب عمدی باشد. کدهای پایدار teh/isf ارسال می‌شوند.
<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 for جفت می‌شود
- name کلید انتخاب ارسالی است
- هر option مقدار کوتاه دارد
- value خالی اول از پیش‌فرض اتفاقی جلوگیری می‌کند
- required تا شهر واقعی لازم است
- یادداشت input تک‌خطی است نه textarea
غذا با optgroup
دموی دوم منوی غذا با بخش‌های Veg و Other. selected پیش‌فرض؛ disabled برای ناموجود.
<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
- کد پایدار در value، برچسب انسانی در متن
- فهرست را داخل textarea ننویسید
تمرین — ساخت و گروه‌بندی
- دموی شهر؛ شهر چهارم با value کوتاه
- متن Choose را عوض کنید؛ value خالی بماند
- required را بردارید و برگردانید
- دموی optgroup؛ Soup را جابه‌جا کنید
- disabled Grill را آزمایش کنید
- جمله: select مقدار value را می‌فرستد؛ textarea متن آزاد
- پیشنهاد با تایپ مال datalist بعدی است
اشتباهات آسان
- بدون value وقتی کد می‌خواستید
- فراموش name روی select
- بدون label
- ریختن گزینه‌ها در textarea
- فهرست بلند بدون optgroup
- name روی هر option به‌جای select
- قاطی با datalist بعدی
خلاصه
- select + option = انتخاب از فهرست
- label و name روی select
- value هر option ارسال می‌شود
- اختیاری: prompt، selected، disabled، optgroup
- نه متن چندخطی آزاد (textarea)
- بعدی: datalist
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود