معرفی و کاربرد تگ option در HTML | ایجاد لیست انتخابی
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <option> در HTML می پردازیم.
تگ <option> در HTML
هر تگ <option> یک گزینه برای لیست انتخابی تعریف می کند. تگ <option> معمولا در داخل تگ select و یا در داخل تگ datalist قرار می گیرد.
تگ های select و datalist نیز در ساخت لیست کشویی در سند HTML کاربرد دارند.
تگ select برای ایجاد یک لیست کشویی (drop-down) با کمک تگ های option استفاده می شود.
تگ datalist هم یک لیست کشویی از گزینه های از قبل تعریف شده برای یک تگ input می تواند مشخص کند.
تگ optgroup نیز برای گروه بندی option ها یا گزینه های مرتبط در یک لیست کشویی استفاده می شود.
نکات مهم در کاربرد تگ <option> در اچ تی ام ال
نکته ۱:
تگ <option> می تواند بدون به کار بردن هیچ یک از خصوصیات بکار رود، اما شما معمولا به خصوصیت value برای اینکه مشخص کند چه چیزی به سرور ارسال شود نیاز دارید.
نکته ۲:
اگر شما یک لیست طولانی از گزینه ها داشته باشید می توانید، گزینه های مرتبط را به وسیله تگ <optgroup> گروه بندی کنید.
معرفی و کاربرد تگ option در HTML | لیست انتخابی
مثال در مورد تگ <option> در اچ تی ام ال
[html]<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>[/html]
خروجی کد در مرورگر اینترنتی
بررسی تگ <option> در HTML 4.01 و HTML5
تفاوتی بین خصوصیات تگ <option> در HTML 4.01 ، در HTML5 وجود ندارد. و تگ <option> در همه ورژن های سند HTML پشتیبانی می شود.
خصوصیات ویژه تگ <option> در اچ تی ام ال
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| disabled | disabled | مشخص می کند که option باید غیر فعال شود. |
| label | text | یک برچسب کوتاه برای option مشخص می کند. |
| selected | selected | مشخص می کند هنگامی که صفحه لود می شود option ها به طور پیش فرض انتخاب شده باشد. |
| value | text | مشخص می کند که چه مقدار به سرور ارسال شود. |
ویژگی های عمومی تگ <option> در HTML
تگ <option> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
رویدادهای عمومی تگ <option> در اچ تی ام ال
تگ <option> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.
پشتیبانی مرورگرها از تگ <option> در HTML
تگ <option> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
سلام سوال من اینه که آیا میشه بیش از یک value برای تگ option ذخیره کرد؟
مثلاً به شکل آرایه؟
خیلی مهمه، اگه پاسخ بدین خیلی خیلی خیلی ممنون میشم
سلام دوست گرامی به صورت عادی شما در سند html قادر به انجام چنین کاری نیستید. نمی دونم چقدر به php مسلط هستید. اما می توانید از طریق زبان سمت سرور php و استفاده از تابع foreach و تعریف آرایه برای هر یک از تگ های option خود چندین value تعریف نمایید.