تگ optgroup در html

تگ optgroup برای گروه‌بندی گزینه‌ها (<option>) در یک فیلد کشویی <select> استفاده می‌شود. این تگ به دسته‌بندی منطقی گزینه‌ها کمک می‌کند و باعث بهبود خوانایی و دسترسی‌پذیری فرم‌ها می‌شود. عنوان هر گروه با استفاده از ویژگی label تعیین می‌شود.

تگ <optgroup> درون تگ <select> قرار می‌گیرد و شامل یک یا چند تگ <option> است. این تگ به تنهایی قابل انتخاب نیست و فقط برای نمایش عنوان گروه به کار می‌رود.

<label for="language">انتخاب زبان برنامه‌نویسی:</label>
<select name="language" id="language">
  <optgroup label="Front-end">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Back-end">
    <option value="php">PHP</option>
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

تگ optgroup دارای ویژگی‌های محدودی است که در ادامه معرفی می‌شوند:

این ویژگی برای تعیین عنوان گروه استفاده می‌شود و باید مقدار متنی داشته باشد. این متن به‌صورت بولد یا برجسته در منوی کشویی نمایش داده می‌شود و قابل انتخاب نیست.

<optgroup label="زبان‌های Front-end">...</optgroup>

با استفاده از این ویژگی، تمامی گزینه‌های داخل گروه غیرفعال می‌شوند. کاربر نمی‌تواند هیچ‌کدام از گزینه‌های آن گروه را انتخاب کند.

<optgroup label="غیرفعال" disabled>
  <option>گزینه ۱</option>
  <option>گزینه ۲</option>
</optgroup>

تگ <optgroup> از Global Attributes مانند id، class، style و غیره پشتیبانی می‌کند.

تگ <optgroup> به‌طور معمول از Event Attributes استفاده نمی‌کند زیرا قابل تعامل مستقیم با کاربر نیست. ولی از نظر فنی می‌توان برخی رویدادها را به آن اختصاص داد، هرچند پشتیبانی مرورگرها در این زمینه محدود است.

مرورگرها تگ <optgroup> را به‌صورت غیرقابل انتخاب و با سبک برجسته یا تو رفته نمایش می‌دهند. معمولاً متن آن ضخیم‌تر از گزینه‌ها است و فضای جداکننده بالای آن قرار دارد.

optgroup {
  font-weight: bold;
  padding-top: 4px;
}