اصول نوشتن لیستهای کشویی برای استفاده در فرمهای 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>

در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:

 گزینه اول گزینه دوم گزینه سوم 

با انتخاب هر یک از گزینه های موجود در لیست و کلیک بر روی دکمه ارسال فرم، مقدار مربوط به آن گزینه به صفحه action ارسال می شود.

از شناسه های زیر می توان در تگ <select> استفاده کرد:

• name : 
  از این شناسه برای تخصیص یک نام به لیست استفاده می شود.

  ---

• size :
  این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.

  ---

• "multiple="multiple :
  در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.

  ---

• "disabled="disabled :
  این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.

برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید:

حالت مورد نظر شما :  فعال    غیر فعال

کادر متنی نمونه :  گزینه اول گزینه دوم گزینه سوم 

از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم:
onfocus, onblur, onchange

---

وارد کردن گزینه ها به لیست با تگ <option>

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

برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید:

• value :
  این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.

  ---

• "selected="selected :
  از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

---

دسته بندی گزینه های لیست های کشویی با استفاده از <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 :
  این شناسه برای هر گروه از گزینه ها یک عنوان یا برچسب مشخص می کند که در لیست در بالای هر گروه نمایش داده می شود و آن گروه را از سایر گزینه ها جدا می کند.

از رویدادهای زیر می توانید در تگ <optgroup> استفاده کنید:
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup