HTML — انتخاب (select)

آخرین بروزرسانی: 1404/08/07

انتخاب (select)

تگ «انتخاب (select)» یک «لیست کشویی (Drop-down)» می سازد. کاربر از بین گزینه ها یکی را برمی گزیند. این تگ در فرم ها خیلی کاربردی است.

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

تگ «select» داخل فرم می آید و با تگ های «option» گزینه ها را می سازد. ویژگی «name» برای ارسال داده ضروری است. همچنین «id» به برچسب «label» وصل می شود.

نمونه ساده لیست کشویی

&lt;label for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
  &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
  &lt;option value=&quot;mercedes&quot;&gt;Mercedes&lt;/option&gt;
  &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;

مشاهده در ادیتور

ویژگی های مهم select

name: نام فیلد برای ارسال فرم.
id: اتصال به label برای دسترس پذیری.
multiple: انتخاب چندگانه همزمان.
required: مجبور به انتخاب می کند.
size: تعداد گزینه های قابل مشاهده.

گروه بندی گزینه ها با optgroup

&lt;label for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  &lt;optgroup label=&quot;Swedish Cars&quot;&gt;
    &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
    &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label=&quot;German Cars&quot;&gt;
    &lt;option value=&quot;mercedes&quot;&gt;Mercedes&lt;/option&gt;
    &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;

مشاهده در ادیتور

پشتیبانی مرورگر و CSS پیش فرض

همه مرورگرهای مدرن «select» را پشتیبانی می کنند. در منبع، CSS پیش فرضی ثبت نشده است.

نکته: همیشه برای «select» یک label بگذار. این کار فرم را برای همه قابل استفاده می کند.

هشدار: اگر «name» را ننویسی، مقدار لیست ارسال نمی شود. همچنین متن گزینه ها را واضح بنویس.

گام های عملی سریع

یک «label» بنویس و «for» را با «id» برابر کن.
یک «select» با «name» و «id» ایجاد کن.
برای هر گزینه یک «option» با «value» بساز.

لینک های داخلی مرتبط

بخوان: گزینه ها (option) و برچسب ها (label).

جمع بندی سریع

«select» لیست کشویی می سازد.
«name» برای ارسال ضروری است.
«label» دسترس پذیری را بهتر می کند.
با «optgroup» گروه بندی کن.

قبلی: بخش (section) بعدی: کوچک (small)

فهرست سرفصل‌های HTML