توضیح:
برای اینکه بتوانیم یک لیست بصورت آبشاری یا drop-down ایجاد نمایید که با کلیک کردن بتوان یکی از آنها را انتخاب کرد میتوان از تگ select بهره برد.
از این تگ معمولاً درون فرم و برای جمع آوری داده های وارد شده توسط کاربر استفاده میشود.
برای اینکه مشخص شود کدام داده در این تگ پس از ارسال فرم انتخاب شده است بهتر است از خصوصیت name درون المنت استفاده شود.
برای اتصال لیبل فیلد به تگ select بهتر است از خصوصیت id استفاده شود.
درون این تگ از تگ option برای انتخاب گزینه ها استفاده میشود.
همیشه سعی کنید برای بهبود رابط کاربری از تگ label استفاده نمایید.
با استفاده از تگ optgroup میتوان گزینه های select را گروه بندی کرد.
خصوصیات این تگ:
| نام خصوصیت |
|---|
| autofocus |
| form |
| name |
| disabled |
| multiple |
| required |
| size |
وضعیت پشتیبانی از مرورگرها:
| مرورگر Chrome | مرورگر Firefox | مرورگر Edge | مرورگر Safari | مرورگر Opera |
|---|---|---|---|---|
| همگی | همگی | همگی | همگی | همگی |
مثال:
|
1 2 3 4 5 |
<label for="name">Choose a name:</label> <select name="name" id="name"> <option value="amir javanmir">amir javanmir</option> <option value="shahryar barati">shahryar barati</option> </select> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> |
