منوهای کشویی

منوهای کشویی (<select> و <option>): انتخاب دقیق از میان گزینه‌ها! 📋

سلام به همه! وقتی با لیستی از گزینه‌ها روبرو هستیم و می‌خوایم کاربر یکی از اون‌ها رو انتخاب کنه، بهترین ابزار تگ <select> هست. این تگ یه منوی کشویی ایجاد می‌کنه که با کلیک روی اون، گزینه‌های موجود نمایش داده می‌شن.

منوهای کشویی برای مواقعی که تعداد گزینه‌ها زیاد هستن یا نمی‌خوایم صفحه فرم شلوغ بشه، فوق‌العاده کاربردی هستن.

ساختار تگ <select> و <option>:

تگ <select> خودش به تنهایی کار خاصی انجام نمی‌ده؛ بلکه اون رو با تگ‌های <option> پر می‌کنیم. هر تگ <option> نماینده یک گزینه در منوی کشویی ماست.

<select name="نام_فیلد" id="شناسه_فیلد">
  <option value="مقدار_گزینه_۱">متن نمایش داده شده برای گزینه ۱</option>
  <option value="مقدار_گزینه_۲">متن نمایش داده شده برای گزینه ۲</option>
  <option value="مقدار_گزینه_۳" selected>متن نمایش داده شده برای گزینه ۳ (انتخاب پیش‌فرض)</option>
  <option value="مقدار_گزینه_۴" disabled>گزینه ۴ (غیرقابل انتخاب)</option>
</select>

خصوصیت‌های کلیدی:

• select:
  • name: نامی که این فیلد در اطلاعات ارسالی فرم خواهد داشت.
  • id: شناسه منحصر به فرد برای اتصال به تگ <label>.
  • size: اگر بخواهید منو به جای حالت کشویی، لیستی با تعداد مشخصی گزینه قابل مشاهده باشد، از این خصوصیت استفاده می‌کنید (مثلاً size="3").
  • multiple: اگر بخواهید کاربر بتواند بیش از یک گزینه را انتخاب کند، این خصوصیت را اضافه کنید. در این حالت، معمولاً باید از کلید Ctrl (یا Cmd در مک) استفاده کرد.
• option:
  • value: مقداری که در صورت انتخاب این گزینه، به سرور ارسال می‌شه. این مقدار خیلی مهمه!
  • selected: اگر این خصوصیت وجود داشته باشه، اون گزینه به صورت پیش‌فرض انتخاب شده خواهد بود.
  • disabled: این گزینه رو غیرقابل انتخاب می‌کنه.

مثال کاربردی: انتخاب شهر

فرض کنید می‌خواهیم کاربر شهر محل سکونتش رو از بین چند شهر انتخاب کنه:

<div style="margin-bottom: 15px;">
  <label for="city-select" style="display: block; margin-bottom: 5px; color: #4682b4;">شهر:</label>
  <select id="city-select" name="city" style="padding: 8px; border: 1px solid #008080; border-radius: 4px; min-width: 150px;">
    <option value="" disabled selected>-- لطفا شهر خود را انتخاب کنید --</option> <!-- گزینه اول به عنوان راهنما -->
    <option value="tehran">تهران</option>
    <option value="isfahan">اصفهان</option>
    <option value="shiraz">شیراز</option>
    <option value="mashhad">مشهد</option>
    <option value="tabriz">تبریز</option>
  </select>
</div>

در این مثال:

• گزینه اول value=”” داره و با disabled و selected مشخص شده تا کاربر رو راهنمایی کنه و نتونه انتخاب بشه.
• هر شهر یک value منحصر به فرد داره که به سرور ارسال می‌شه (مثلاً “tehran”).
• متنی که کاربر می‌بینه (مثلاً “تهران”) بین تگ‌های <option> قرار گرفته.

مثال با قابلیت انتخاب چندگانه:

برای انتخاب چند آهنگ مورد علاقه:

<div style="margin-bottom: 15px;">
  <label for="music-select" style="display: block; margin-bottom: 5px; color: #4682b4;">آهنگ‌های مورد علاقه:</label>
  <select id="music-select" name="favorite_music[]" multiple size="4" style="padding: 8px; border: 1px solid #008080; border-radius: 4px; min-width: 150px;"> <!-- name="...[]" برای ارسال آرایه‌ای -->
    <option value="rock">راک</option>
    <option value="pop">پاپ</option>
    <option value="jazz">جز</option>
    <option value="classical">کلاسیک</option>
    <option value="electronic">الکترونیک</option>
  </select>
</div>

در این حالت، کاربر می‌تونه با نگه داشتن کلید Ctrl، چندتا از گزینه‌ها رو انتخاب کنه. اضافه کردن [] به انتهای نام فیلد (name="favorite_music[]") به سرور کمک می‌کنه بفهمه این مقادیر باید به صورت آرایه دریافت بشن.

ارتباط با label: فراموش نکنید که همیشه تگ <select> خودتون رو با استفاده از خصوصیت id و for به یک تگ <label> مرتبط کنید تا دسترسی‌پذیری فرمتون بالا بره.

منوهای کشویی ابزارهای قدرتمندی برای مدیریت انتخاب‌ها در فرم‌های شما هستن. با استفاده درست از value و خصوصیت‌های دیگه، می‌تونید فرم‌های حرفه‌ای و کاربرپسند طراحی کنید. موفق باشید! ✨