تگ select در HTML + ویدیو آموزشی

تگ select در html برای ایجاد یک لیست کشویی (لیست بازشو) استفاده می شود. تگ سلکت معمولا در فرم ها برای دریافت اطلاعات از کاربران استفاده می شود و کاربر می تواند با کلیک بر روی لیست کشویی گزینه ها را ببیند و آیتم مورد نظر را از بین آنها انتخاب کند. در این نوشته سعی می کنیم تگ select در html را به صورت کامل بررسی کنیم.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

آموزش تگ select در html

ایجاد یک لیست کشویی با تگ <select> بسیار ساده است، فقط کافی است شیوه استفاده از آن را بدانید و با ویژگی هایی که در این تگ می توانید استفاده کنید آشنا باشید. در ادامه سعی می کنیم با مثال های متفاوت پرکاربردترین موارد را به شما آموزش دهیم.

• تگ <select> جهت ایجاد لیست کشویی استفاده می شود.
• تگ <select> معمولا در فرم ها استفاده می شود تا اطلاعاتی را از کاربران دریافت کنیم. (اگر با تگ فرم آشنا نیستید فیلم آموزش تگ form در html را ببینید)
• ویژگی name را نیز به کار می بریم تا بتوانیم داده ها را بعد از ارسال ارجاع دهیم. در صورتی که name را تعریف نکنیم هیچ اطلاعاتی از لیست کشویی ارسال نمی شود.
• هر گزینه داخل تگ سلکت با تگ <option> تعریف می شود.

نکته: برای ایجاد تجربه کاربری بهتر می توانید از تگ label  قبل از ایجاد لیست کشویی استفاده کنید.

تگ option در html

تگ option در html برای ایجاد آیتم های لیست کشویی به کار می رود. این تگ شامل یک تگ باز و یک تگ بسته است. بنابراین برای ایجاد هر کدام از گزینه های داخل لیست کشویی، آن آیتم را بین تگ <option> قرار می دهیم. (البته این تگ برای ایجاد گزینه های تگ <datalist> و <optgroup> نیز استفاده می شود که موضوع بحث ما نیست.)

ویژگی selected:

• این ویژگی داخل تگ option تعریف می شود.
• البته فقط باید به یکی از option ها این ویژگی را تعریف کنیم.
• ویژگی selected برای هر کدام از آیتم ها تعریف شود آن آیتم به عنوان پیشفرض لیست قرار می گیرد.

مثال: ایجاد لیست کشویی ساده برای انتخاب مدرک تحصیلی

<label>مدرک تحصیلی شما</label>
<select name="education">

<option>دیپلم</option>
<option>لیسانس</option>
<option>فوق لیسانس</option>
<option>دکتری</option>

</select>

خروجی:

استایل دهی به تگ select

در بالا شیوه صحیح استفاده از تگ select در html را آموختید ولی همانطور که مشاهده می کنید خروجی لیستی که ایجاد کرده ایم استایل خوبی ندارد. بنابراین لازم است یک سری استایل ها برای آن در نظر بگیریم تا از نظر ظاهری زیبا شود. شما در فایل css خود می توانید هر استایلی برای آن تعریف کنید. ما استایلهای زیر را برای نمونه در نظر می گیریم تا به خروجی بهتری دست یابیم. (اگر با استایل دهی آشنا نیستید پیشنهاد می کنم در دوره html css رایگانی که لینک آن را در ابتدای صفحه قرار دادیم شرکت نمایید)

 .myform textarea , .myform select {
width:100%;
padding:12px;
border:1px solid #ddd;
}

کار با تگ select (مثالهای کاربردی)

مثال: استفاده از صفت required (انتخاب یکی از آیتم های لیست ضروری است)

<label>مدرک تحصیلی شما</label>
<select name="education" required>
<option>دیپلم</option>
<option>لیسانس</option>
<option>فوق لیسانس</option>
<option>دکتری</option>
</select>

مثال: استفاده از صفت multiple باعث می شود کاربر بتواند چند گزینه از لیست را انتخاب کند. (برای انتخاب بیش از یک گزینه کلید Ctrl را نگه داشته و گزینه ها را انتخاب نمایید)

<label>مدرک تحصیلی شما</label>
<select name="education" multiple>
<option>دیپلم</option>
<option>لیسانس</option>
<option>فوق لیسانس</option>
<option>دکتری</option>
</select>

مثال: استفاده از صفت disabled برای غیرفعال کردن لیست

<label>مدرک تحصیلی شما</label>
<select name="education" disabled>
<option>دیپلم</option>
<option>لیسانس</option>
<option>فوق لیسانس</option>
<option>دکتری</option>
</select>

مثال: استفاده از صفت size برای نمایش همزمان چند آیتم از لیست (یعنی بجای مشاهده گزینه اول می توانید چند گزینه ابتدایی را نمایش دهید.)

<label>مدرک تحصیلی شما</label>
<select name="education" size="3">
<option>دیپلم</option>
<option>لیسانس</option>
<option>فوق لیسانس</option>
<option>دکتری</option>
</select>

لیست صفات select

تگ select در html می تواند صفات متفاوتی داشته باشد. در زیر می توانید برخی از صفاتی که این تگ می گیرد را مشاهده کنید و با کاربرد آنها آشنا شوید:

autofocus: فوکوس روی لیست (به محض بالا آمدن لیست روی آن فوکوس می شود)

disabled: غیرفعال کردن لیست

multiple: می توانید چند گزینه را انتخاب کنید.

name: انتخاب نام برای لیست کشویی

required: انتخاب یکی از گزینه ها ضروری است

number: مشخص کردن تعداد آیتم های لیست

جمع بندی

هنگام طراحی یک فرم، ایجاد یک لیست کشویی می تواند یکی از انتخاب های مناسب برای دریافت اطلاعات از کاربران باشد. اگر شما هم می خواهید در فرم خود یک لیست بازشونده زیبا و کاربردی داشته باشید با مطالعه موارد بالا به راحتی می توانید لیست خود با ویژگی های دلخواه را ایجاد کنید. اگر در هر کدام از مراحل ایجاد لیست مشکلی داشتید در بخش نظرات مطرح نمایید. ما با افتخار آماده پاسخگویی به شما هستیم.

منبع: https://www.w3schools.com/tags/tag_select.asp