آموزش HTML – تگ select

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/14 | بخش : آموزش HTML

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

تگ <select> تگی است که با استفاده از آن می توان یک لیست کشویی ( لیست بازشو ) را ایجاد کرد.

همچنین با استفاده از تگ <option> نیز می توان آیتم ها یا گزینه های لیست کشویی را مشخص یا تعریف کرد.

  • تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.
  • تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.

 

مثال از تگ select در HTML

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

تمرین کنید !

 

مثال شماره ۲ : لیستی که غیرفعال می باشد.

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

تمرین کنید !

 

مثال شماره ۳ : لیستی که قابلیت انتخاب بیش از چند گزینه را دارد. (برای انتخاب بیش از ۱ آیتم/گزینه باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس گزینه ها را انتخاب نمایید)

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ select در HTML

Element
<select> بله بله بله بله بله

 

جدول صفات تگ select در HTML

نام صفت  مقدار توضیح
autofocus autofocus مشخص می کند که لیست بصورت پیش فرض به محض بالا آمدن صفحه برویش فوکوس شود. (یعنی در حالت انتخاب در می آید)
disabled disabled مشخص می کند که لیست غیرفعال باشد. (رنگش بصورت خاکستری می شود)
form form_id مشخص می کند که لیست متعلق به ۱ یا چندین فرم می باشد.
multiple multiple قابلیت انتخاب همزمان چندین گزینه را در لیست مشخص می کند.
برای انتخاب بیش از یک گزینه باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس بروی گزینه های مورد نظرتان کلیک نمایید.
name name یک نام را برای لیست مشخص می کند.
required required مشخص می کند که انتخاب کردن حداقل یکی از گزینه های لیست ضروری می باشد.
size number تعداد گزینه های قابل نمایش در لیست را مشخص می کند.