انتخاب فرم

انتخاب پیش فرض

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

  <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

  <select class="form-select rounded-pill mb-3" aria-label="Default select example">
    <option selected>Search for services</option>
    <option value="1">Information Architecture</option>
    <option value="2">UI/UX Design</option>
    <option value="3">Back End Development</option>
</select> 

 <select class="form-select" aria-label="Disabled select example" disabled>
    <option selected>Open this select menu (Disabled)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

اندازه منو

استفاده کنید multiple ویژگی برای انتخاب چندین مقدار و size="your value" ویژگی برای نشان دادن تعدادی گزینه انتخابی در یک منطقه انتخابی.

 <select class="form-select" multiple aria-label="multiple select example">
    <option selected>Open this select menu (multiple select option)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

 <select class="form-select" size="3" aria-label="size 3 select example">
    <option selected>Open this select menu (select menu size)</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select> 

اندازه را انتخاب کنید

استفاده کنید form-select-sm کلاس برای تنظیم اندازه انتخاب کوچک و form-select-lg کلاس به فرم-کلاس را انتخاب کنید تا اندازه انتخاب بزرگ را تنظیم کنید. برای اندازه انتخاب پیش فرض به چنین کلاسی نیاز نیست.

 <select class="form-select form-select-sm  mb-3" aria-label=".form-select-sm example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

 <select class="form-select mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

 <select class="form-select form-select-lg" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> 

انتخاب ها

نمونه ورودی تک انتخابی

تنظیم کنید data-choices ویژگی برای تنظیم یک انتخاب پیش فرض.

تنظیم کنید data-choices data-choices-groups ویژگی به مجموعه گزینه گروه

تنظیم کنید data-choices data-choices-search-false data-choices-removeItem

تنظیم کنید data-choices data-choices-sorting-false ویژگی

ورودی چندگانه انتخاب کنید

تنظیم کنید data-choices multiple ویژگی

تنظیم کنید data-choices data-choices-removeItem multiple ویژگی

تنظیم کنید data-choices data-choices-multiple-groups="true" multiple ویژگی

ورودی های متن

تنظیم کنید data-choices data-choices-limit="Required Limit" data-choices-removeItem ویژگی

وظیفه-1

تنظیم کنید data-choices data-choices-text-unique-true ویژگی

Project-A
Project-B

تنظیم کنید data-choices data-choices-text-disabled-true ویژگی

josh@joshuajohnson.co.uk، joe@bloggs.co.uk
2025© Velzon.
طراحی و توسعه توسط مرداد