تگ select در HTML

  /  فرانت اند   /  HTML   /  تگ select در HTML

با استفاده از تگ select در HTML میتوانید یک لیست کشویی باز شو ایجاد کنید.

مثال

در مثال زیر یک لیست کشویی با چهار گزینه ایجاد کرده ایم:

<label for="cars">انتخاب ماشین:</label>

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


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

از تگ select در HTML برای ایجاد لیست کشویی استفاده می شود.

عنصر <select> برای گرفتن ورودی از کاربر معمولاً در فرم ها استفاده می شود.

خاصیت name همیشه باید برای تگ <select> مشخص شود زیرا اطلاعات این عنصر بعد از ارسال برای سرور با این خاصیت قابل شناسایی و استفاده است ، در صورتی که این ویژگی تنظیم نشود اطلاعات سمت سرور ارسال نمی شود.

برای برقراری ارتباط بهتر بین label و عنصر <select> از ID استفاده کنید.

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


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

عنصر
<select>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
autofocusautofocusمشخص میکند که لیست به صورت پیش فرض به محض بارگیری کامل صفحه روی آن فوکوس شود (یعنی در حالت انتخاب در می آید)
disableddisabledمشخص میکند که لیست غیرفعال باشد
formform_idمشخص میکند که لیست متعلق به ۱ یا چندین فرم می باشد
multiplemultipleقابلیت انتخاب همزمان چندین گزینه یا آیتم را در لیست مشخص میکند ، برای انتخاب بیش از یک گزینه باید دکمه Ctrl را از روی صفحه کلید نگه دارید سپس با ماوس بروی گزینه های مورد نظرتان کلیک نمایید
namenameیک نام برای لیست کشویی تعریف می کند
requiredrequiredمشخص میکند که انتخاب کردن حداقل یکی از گزینه های لیست ضروری می باشد
sizenumberتعداد گزینه های قابل نمایش در لیست را مشخص میکند

خواص عمومی

تگ select از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

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

تنظیمات پیش فرض CSS

هیچ دستور پیش فرض CSS ندارد.

مثال های بیشتر

در مثال زیر با استفاده از تگ <optgroup> گزینه های لیست کشویی را دسته بندی کرده ایم:

<form action="#">
<label for="cars">یک ماشین انتخاب کنید:</label>
<select name="cars" id="cars">
<optgroup label="اتومبیل سوئدی">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="اتومبیل آلمانی">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="ثبت">
</form>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر