تگِ Select
Radio Button ها به ما این امکان را می دهند تا از بین گزینه ها یکی را انتخاب کنیم، اما فرض کنید گزینه های ما 20 و حتی بیشتر باشند، در اینجا اگر از Radio Button ها استفاده کنیم فضای زیادی از صفحه اشغال می شود، در اینجا انتخاب بهتر برای ما تگِ select است. این کنترل به کاربر اجازه می دهد تا از بین گزینه هایی که در یک فیلد باز شونده قرار دارند یکی را انتخاب کند و در اینجا فضای بسیار کمتری از صفحه سایت ما اشغال می شود، احتمالا از این form control در سایت های متعددی استفاده کرده اید.
تگِ Select از یک فهرست بازشونده
کد HTML برای رسیدن به این افکت را مشاهده نمایید:
<p>
<label for="role">Which best describes you?</label>
<select name="role" id="role">
<option>Secretary</option>
<option>Web Designer</option>
<option>Manager</option>
<option>Cleaner</option>
<option>Other</option>
</select>
</p>
گزینه از پیش تعیین شده برای تگِ select
همانند checkbox ها و radio button ها در اینجا نیز می توانیم گزینه ای از پیش انتخاب شده به تگِ select اختصاص دهیم، برای رسیدن به این نتیجه باید از خصوصیت selected با مقدار selected استفاده کنیم.
بار دیگر تگِ select را مشاهده کنید، این بار با انتخاب گزینه از پیش تعیین شده “Web Designer”:
<p>
<label for="role">Which best describes you?</label>
<select name="role" id="role">
<option>Secretary</option>
<option selected="selected">Web Designer</option>
<option>Manager</option>
<option>Cleaner</option>
<option>Other</option>
</select>
</p>
selection های چند انتخابی
این امکان وجود دارد که با استفاده از selection ها فهرستی درست کنیم که کاربر بتواند چند گزینه آن را انتخاب کند، اما استفاده از checkbox ها برای این کار انتخابی بهتر است. از آنجایی که کار را برای کاربر ساده مشکل می سازد، کاربر باید همزمان با فشردن کلید Ctrl با دکمه ماوس گزینه هایش را انتخاب کند که این کار برای افرادی که تنها با کیبورد کار می کنند اندکی سخت می شود.
