اصول نوشتن لیستهای کشویی برای استفاده در فرمهای HTML
لیستهای کشویی (Select)
برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <select> استفاده کنیم. گزینه های موجود
در این تگ بین<option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.
در اینجا می توانید یک نمونه از کدی را که با آن یک لیست کشویی ساخته می شود مشاهده کنید:
<select name="someName">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
</select>
از شناسه های زیر می توان در تگ <select> استفاده کرد:
name : از این شناسه برای تخصیص یک نام به لیست استفاده می شود.
size : این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع ارتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این
شناسه باید عددی بزرگتر از صفر باشد.
"multiple="multiple : در صورتی که این شناسه به تگ <select> اضافه شود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.
"disabled="disabled : این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.
وارد کردن گزینه ها به لیست با تگ <option>
برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می
کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم.
برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید:
value : این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی ارسال می شود.
"selected="selected : از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای
هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.
دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>
اگر یک لیست کشویی طولانی دارید می توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند.
برای انجام این کار می توانید از تگ <optgroup> استفاده کنید. با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/>
قرار دهید.
کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند:
<select>
<optgroup label="عنوان گروه اول">
<option value ="some value "> گزینه اول در گروه اول </option>
<option value ="saab"> گزینه دوم در گروه اول </option>
</optgroup>
<optgroup label="عنوان گروه دوم">
<option value ="mercedes"> گزینه اول در گروه دوم </option>
<option value ="audi"> گزینه دوم در گروه دوم </option>
</optgroup>
</select>
استفاده از شناسه زیر در تگ <optgroup> الزامی است :
label : این شناسه برای هر گروه از گزینه ها یک عنوان یا برچسب مشخص می کند که در لیست در بالای هر گروه نمایش داده می شود و آن گروه را از سایر گزینه ها جدا می کند.
