آموزش تگ option در HTML - راهنمای کار با گزینه های لیست در html

برای تعریف گزینه های یک لیست از تگ option استفاده می شود.

تگ option معمولا برای تعریف آیتم های عناصر <select>، <optgroup> و <datalist> به کار می رود.

می توان از این تگ بدون استفاده از هیچ ویژگی ای استفاده کرد اما بهتر است از value برای مقدار دهی استفاده شود. همچنین برای دسته بندی آیتم ها می توان از تگ optgroup استفاده کرد.

مثال تگ option در HTML

مثال 1: استفاده در تگ select

<label for="cars">Choose a car:</label>

<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

مثال 2: استفاده در تگ datalist

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

مثال 3: استفاده در تگ optgroup

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</optgroup>
</select>

پشتیبانی مرورگرها

تگ <option> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	بله	بله	بله	بله	بله

ویژگی ها

ویژگی	مقدار	توضیحات
disabled	disabled	غیر فعال کردن گزینه مورد نظر
label	text	تعیین برچسب برای گزینه
selected	selected	انتخاب گزینه به صورت پیش فرض
value	text	تعیین مقدار گزینه برای ارسال به سرور