تگ select در html یکی از مهمترین و پرکاربردترین تگها برای ایجاد منوهای کشویی (dropdown menus) است. این تگ به کاربر امکان میدهد تا از یک مجموعه از گزینهها، یکی را انتخاب کند. در حالی که گزینههای دیگری در دسترس هستند، تنها گزینه انتخاب شده به کاربر نمایش داده میشود. در این مطلب به بررسی دقیقتر تگ <select>، ویژگیهای آن، کاربردها، و چگونگی استفاده از آن در طراحی وب میپردازیم.
گ <select> برای تعریف منوی کشویی استفاده میشود و باید در کنار تگهای <option> قرار گیرد. هر تگ <option> یک گزینه در منوی کشویی را نمایش میدهد. هنگامی که کاربر یکی از این گزینهها را انتخاب میکند، مقدار انتخاب شده به سرور ارسال میشود (در صورت استفاده در فرم) یا توسط جاوااسکریپت پردازش میگردد.
نمونه اولیه:
<select name=“mySelect“>
<option value=“option1“>Option 1</option>
<option value=“option2“>Option 2</option>
<option value=“option3“>Option 3</option>
</select>
در این مثال، سه گزینه مختلف برای انتخاب وجود دارد. هر کدام از گزینهها دارای یک مقدار (value) و یک متن نمایشی هستند. وقتی کاربر گزینهای را انتخاب میکند، مقدار (value) به عنوان خروجی انتخاب میشود.
ویژگیهای تگ select
۱٫ ویژگی name
ویژگی name در تگ <select> نام فیلد فرم را تعیین میکند که هنگام ارسال فرم به سرور ارسال میشود. این ویژگی بهویژه هنگام استفاده از فرمها برای ارسال اطلاعات به سمت سرور بسیار حیاتی است.
<select name=“country“>
<option value=“us“>United States</option>
<option value=“uk“>United Kingdom</option>
<option value=“ir“>Iran</option>
</select>
۱٫ ویژگی name
ویژگی name در تگ <select> نام فیلد فرم را تعیین میکند که هنگام ارسال فرم به سرور ارسال میشود. این ویژگی بهویژه هنگام استفاده از فرمها برای ارسال اطلاعات به سمت سرور بسیار حیاتی است.
ارائه خدمات مشاوره کسب و کار و طراحی سایت کرمانشاه و سئو سایت کرمانشاه در جهت توسعه ی فروش، رشد کسب و کار و تغییر موقعیت برند شما پنج شنبه های هر هفته
ویژگی id و class
همانند اکثر تگهای HTML، میتوانید ویژگیهای id و class را به تگ <select> اضافه کنید تا به صورت اختصاصی استایلدهی (CSS) یا پردازش (جاوااسکریپت) انجام شود.
<select id=“mySelect“ class=“form–control“>
<option value=“1“>Option 1</option>
<option value=“2“>Option 2</option>
<option value=“3“>Option 3</option>
</select>
این کد امکان استایلدهی و کنترل دقیقتر منوی کشویی را با استفاده از CSS و جاوااسکریپت فراهم میکند.
۳٫ ویژگی multiple
اگر میخواهید کاربران بتوانند بیش از یک گزینه را از منوی کشویی انتخاب کنند، میتوانید از ویژگی multiple استفاده کنید. این ویژگی به کاربران اجازه میدهد که چندین گزینه را به صورت همزمان انتخاب کنند.
در این مثال، کاربر میتواند بیش از یک گزینه را از لیست انتخاب کند. همچنین، با استفاده از ویژگی size میتوان تعداد گزینههای قابل مشاهده را کنترل کرد.
ویژگی size
ویژگی size تعداد گزینههایی که به صورت همزمان نمایش داده میشوند را تعیین میکند. به طور پیشفرض، منوی کشویی فقط یک گزینه را نمایش میدهد، اما با استفاده از ویژگی size میتوان این تعداد را تغییر داد.
در این مثال، لیست به گونهای طراحی شده که همزمان ۳ گزینه قابل مشاهده باشد و کاربر بدون نیاز به کلیک روی لیست، بین آنها پیمایش کند.
