آموزش و يادگيري تگ optgroup در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <optgroup> آشنا مي‌شويم. اين تگ براي گروه‌بندي گزينه‌ها در منوي کشويي (dropdown) داخل تگ <select> استفاده مي‌شود.

تگ optgroup در HTML چيست؟

تگ <optgroup> به شما اجازه مي‌دهد گزينه‌ها را در دسته‌هاي مجزا قرار دهيد تا فهرست انتخابي سازماندهي شده و خواناتر شود. اين تگ معمولاً شامل ويژگي label براي نام گروه است و داخل تگ <select> استفاده مي‌شود.

مثال ساده از تگ optgroup

<label>انتخاب ميوه:</label>
<select>
  <optgroup label="ميوه‌هاي تابستاني">
    <option value="watermelon">هندوانه</option>
    <option value="peach">هلو</option>
  </optgroup>
  <optgroup label="ميوه‌هاي زمستاني">
    <option value="orange">پرتقال</option>
    <option value="apple">سيب</option>
  </optgroup>
</select>

در اين مثال، گزينه‌ها به دو گروه تابستاني و زمستاني تقسيم شده‌اند و کاربر مي‌تواند به راحتي گزينه مورد نظر را پيدا کند.

ويژگي‌هاي مهم تگ optgroup

مثال با ويژگي disabled

<select>
  <optgroup label="ميوه‌هاي تابستاني" disabled>
    <option value="watermelon">هندوانه</option>
    <option value="peach">هلو</option>
  </optgroup>
  <optgroup label="ميوه‌هاي زمستاني">
    <option value="orange">پرتقال</option>
    <option value="apple">سيب</option>
  </optgroup>
</select>

در اين مثال، گروه تابستاني غيرقابل انتخاب است و فقط گروه زمستاني فعال مي‌باشد.

نکات مهم درباره optgroup

• تگ <optgroup> فقط داخل <select> کاربرد دارد.
• با استفاده از ويژگي label، گروه‌بندي گزينه‌ها قابل مشاهده و سازماندهي مي‌شود.
• مي‌توان گروه‌ها را غيرفعال کرد تا کاربر نتواند آن‌ها را انتخاب کند.

براي يادگيري کامل ايجاد فرم‌هاي حرفه‌اي و منوهاي کشويي، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.