تگ option در html

تگ option برای تعریف گزینه‌های قابل انتخاب درون منوی کشویی ساخته‌شده با تگ <select> استفاده می‌شود. این تگ معمولاً همراه با ویژگی value به کار می‌رود تا داده‌ای که پس از انتخاب به سرور ارسال می‌شود مشخص شود.

هر تگ <option> نماینده یک گزینه در منوی کشویی است. این تگ درون <select> یا <optgroup> قرار می‌گیرد و می‌تواند دارای متن نمایشی، مقدار، یا ویژگی‌های خاصی باشد.

<select name="city">
  <option value="tehran">تهران</option>
  <option value="mashhad">مشهد</option>
  <option value="isfahan">اصفهان</option>
</select>

تگ option از ویژگی‌های متعددی پشتیبانی می‌کند که رفتار و ظاهر آن را مشخص می‌کنند. در ادامه مهم‌ترین ویژگی‌ها توضیح داده شده‌اند:

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

<option value="php">PHP</option>

این ویژگی مشخص می‌کند که گزینه مورد نظر به‌صورت پیش‌فرض انتخاب شده باشد. فقط یک گزینه در هر منوی <select> بدون ویژگی multiple می‌تواند selected باشد.

<option value="css" selected>CSS</option>

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

<option value="x" disabled>غیرفعال</option>

توجه داشته باشید که ویژگی label به‌صورت رسمی در تگ <option> توسط HTML پشتیبانی نمی‌شود و کاربرد اصلی آن در تگ <optgroup> است. اما برخی مرورگرها ممکن است برای اهداف دسترس‌پذیری یا نمایش خاص، آن را تفسیر کنند.

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

تگ <option> از Event Attributes مانند onchange یا onclick پشتیبانی می‌کند، ولی توجه داشته باشید که اکثر رویدادها روی تگ <select> اعمال می‌شوند و نه مستقیماً روی گزینه‌ها.

مرورگرها گزینه‌های داخل <select> را به‌صورت لیست کشویی نمایش می‌دهند. گزینه‌ها به‌صورت پیش‌فرض با فونت سیستم، رنگ استاندارد و پس‌زمینه سفید نمایش داده می‌شوند و ظاهر آن‌ها ممکن است بسته به سیستم‌عامل متفاوت باشد.

option {
  display: block;
  padding: 2px 6px;
  white-space: nowrap;
}