تگ select و option چیست و ساختار منوی کشویی

خسته شدی از لیست‌های طولانی که صفحه رو خراب می‌کنن؟🤯 تگ select راز منوی کشویی جادویی هست! تگ select مثل یه جعبه جادویی عمل می‌کنه که کلی گزینه رو تو خودش جمع می‌کنه و با یه کلیک باز می‌شه!📦 تگ option هم هر کدوم از انتخاب‌های داخلش هستن. آموزش تگ select و option در HTML اینقدر ساده‌ست:

<select name=city>
  <option value=tehran>تهران🏙️</option>
  <option value=isfahan>اصفهان🕌</option>
  <option value=shiraz>شیراز🌹</option>
</select>

ساختار منوی کشویی در HTML دقیقاً همینه:

• select: جعبه اصلی
• option: هر انتخاب داخلش
• value: چیزی که به سرور می‌فرستی
• متن داخل option: چیزی که کاربر می‌بینه نکته طلایی: همیشه name بذار برای select تا داده‌ها به سرور برسه!🚀

<select name="size" id="size">
  <option value="">سایز انتخاب کن...</option>
  <option value="S">کوچک👕</option>
  <option value="L">بزرگ👚</option>
</select>

با اولین option خالی، کاربر مجبور می‌شه انتخاب کنه!✨ ساختار منوی کشویی در HTML اینقدر آسونه که ۵ دقیقه‌ای بلدی!

attribute های مهم: selected،disabled و multiple

می‌خوای گزینه پیش‌فرض داشته باشی یا چندتا انتخاب کنن؟😲 این ۳ attribute منوی کشویی رو سوپرقدرت می‌کنن! attribute های مهم select در HTML سه تا سوپرقدرت دارن که فرم‌هات رو حرفه‌ای می‌کنن: :selected1️⃣ گزینه پیش‌فرض کاربر که صفحه رو باز کنه، این گزینه خودش انتخاب شده!

<select name="province">
  <option value="tehran">تهران🏙️</option>
  <option value="isfahan" selected>اصفهان🕌</option>
  <option value="shiraz">شیراز🌹</option>
</select>

:disabled 2️⃣غیرفعال کردن بعضی گزینه‌ها رو قفل کن تا کاربر نتونه انتخاب کنه:

<option value="vip" disabled>ویژه VIP⭐</option>
<option value="soldout" disabled>تمام شد😢</option>

:multiple3️⃣چند انتخابی کاربر بتونه چندتا گزینه رو با Ctrl+Click انتخاب کنه:

<select name="skills[]" multiple size="5">
  <option value="html">HTML💻</option>
  <option value="css">CSS🎨</option>
  <option value="js" selected>JavaScript⚡</option>
</select>

آموزش selected disabled multiple در option کامل شد!✨ size="5" هم ارتفاع رو زیاد می‌کنه تا چندتا گزینه دیده بشن. نکته سئویی: از این attribute ها استفاده کن تا "منوی کشویی حرفه‌ای HTML" بسازی و گوگل عاشق سایتت بشه!📈

ساخت select گروهی با optgroup برای دسته‌بندی

لیست‌های درهم‌برهم داری که کاربر سردرگم می‌شه؟😵 optgroup همه رو مثل کمد مرتب می‌کنه! وقتی ۵۰ تا گزینه داری، کاربر گم می‌شه!😩 تگ optgroup مثل قفسه‌های مرتب‌کننده عمل می‌کنه و گزینه‌ها رو گروه‌بندی می‌کنه. ساخت select گروهی با optgroup اینقدر آسونه:

<select name="products">
  <optgroup label="شهرهای شمالی🌊">
    <option value="rasht">رشت🍚</option>
    <option value="sari">ساری🌳</option>
    <option value="babol">بابل🍎</option>
  </optgroup>
  
  <optgroup label="شهرهای مرکزی🏔️">
    <option value="tehran">تهران🏙️</option>
    <option value="qom">قم🕌</option>
  </optgroup>
</select>

دسته‌بندی گزینه‌ها در منوی کشویی HTML جادو می‌کنه: • optgroup label=عنوان گروه جدید • گزینه‌ها داخلش میان • label خودش انتخاب نمی‌شه مثال فروشگاه حرفه‌ای:

<select name="category">
  <optgroup label="لباس👕">
    <option value="shirt">پیراهن</option>
    <option value="pants">شلوار</option>
  </optgroup>
  
  <optgroup label="الکترونیک📱">
    <option value="phone">موبایل</option>
    <option value="laptop">لپ‌تاپ</option>
  </optgroup>
</select>

نتیجه؟ کاربر ۳ برابر سریع‌تر انتخاب می‌کنه و منوی کشویی گروهی HTMLسایتت رو حرفه‌ای نشون می‌ده!✨📈

حالا با select و option می‌تونی منوهای کشویی رویایی بسازی که هم کاربرپسند باشن هم گوگل عاشقشون بشه!✨ یادت باشه name رو فراموش نکنی، optgroup برای مرتب‌سازی عالیه و attribute ها قدرت واقعی رو می‌دن؛ کدها رو کپی کن تست کن و فرم‌هات رو متحول کن تا نرخ تبدیل ۲ برابر بشه.📈