معرفی و کاربرد تگ option در HTML | ایجاد لیست انتخابی

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <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> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

ویژگی های CSS در W3schools

معرفی و کاربرد تگ option در HTML | ایجاد لیست انتخابی – اختصاصی سایت آموزی