تگ <option></option> در html - وب سایت PNLdev

نمونه کد

A simple <option> tag that open PNLdev.com link:

<option value="JS">JS</option>

آزمایشگاه

تعریف و کاربرد

برای گلچین یک گزینه در لیست مربوطه، از تگ <option> استفاده می کنند.

تگ هایی که می توان از option در آنها استفاده کرد عبارت اند از:

تگ <optgroup>.
تگ <datalist>.
تگ <select>.

نکات

نکته: تگ <option> به هیچ ویژگی ای احتیاج ندارد اما برای ارسال داده form به سرور، نیاز است تا از ویژگی value استفاده کنید.

نکته: اگر برای گروه بندی گزینه های لیست با مشکل مواجه شدید و کار دشواری برایتان بود، از تگ <optgroup> به راحتی می توانید کمک بگیرید.

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<option>

ویژگی ها

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

ویژگی های سراسری

تگ option از ویژگی های سراسری HTML پشتیبانی می کند.

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

تگ option از ویژگی های رویداد HTML پشتیبانی می کند.

نمونه کد های بیشتر

نمونه کد

HTML مثالی برای تگ <option> و با استفاده از تگ <datalist> - مثال شماره 1

<form action="/action_page.php" method="get">
  <label for="fruts">Search for your favorite fruit :</label>
  <input list="fruts" name="fruts" id="fruts">
  
  <datalist id="fruts">
    <option value="Pomegranate">
    <option value="Orange">
    <option value="cantaloupe">
    <option value="apple">
    <option value="Grapefruit">
  </datalist>
  <input type="submit">
</form>

آزمایشگاه

نمونه کد

HTML مثالی برای تگ <option> و با استفاده از تگ <optgroup> - مثال شماره 2

<form action="/action_page.php" >
    <label for="cars">Search for your favorite car :</label>
    <select name="cars" id="cars">
        <optgroup label="Japanese cars:">
            <option value="Toyota">Toyota</option>
            <option value="Honda ">Honda</option>
            <option value="Mitsubishi ">Mitsubishi</option>
            <option value="Lexus ">Lexus</option>
        </optgroup>  
        <optgroup label="German cars:">
            <option value="Ford">Ford</option>
            <option value="Porsche ">Porsche</option>
            <option value="Folks ">Folks</option>
            <option value="Maybach ">Maybach</option>
        </optgroup>
    </select>
    <input type="submit" value="submit">
</form>

آزمایشگاه

تگ <option> در HTML <option></option> tag HTML

نمونه کد

تعریف و کاربرد

نکات

سازگاری با مرورگر

ویژگی ها

ویژگی های سراسری

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

نمونه کد های بیشتر

نمونه کد

نمونه کد

تگ <option> در HTML
<option></option> tag HTML