تگ select در html

تگ select در HTML برای ایجاد منوی کشویی (Drop-down List) به کار می‌رود. این تگ به کاربر امکان می‌دهد یکی از گزینه‌های از پیش تعریف‌شده را انتخاب کند. گزینه‌های درون لیست با استفاده از تگ <option> مشخص می‌شوند.

تگ <select> معمولاً در فرم‌ها (تگ form) استفاده می‌شود و باید دارای یک ویژگی name باشد تا مقدار انتخاب‌شده هنگام ارسال فرم به سرور منتقل شود. گزینه‌های داخلی با استفاده از تگ <option> تعریف می‌شوند. هر گزینه دارای مقدار (با ویژگی value) و متن نمایشی برای کاربر است.

در صورتی که گزینه‌ها به دسته‌های مختلف تقسیم شوند (مثلاً کشورها و شهرها، یا زبان‌های برنامه‌نویسی مختلف)، می‌توان از تگ <optgroup> برای گروه‌بندی گزینه‌ها استفاده کرد. این تگ دارای ویژگی label است که عنوان گروه را مشخص می‌کند و درون آن فقط تگ‌های <option> قرار می‌گیرند.

<!-- مثال ساده با option -->
<label for="city">انتخاب شهر:</label>
<select name="city" id="city">
  <option value="tehran">تهران</option>
  <option value="mashhad">مشهد</option>
  <option value="isfahan">اصفهان</option>
</select>

<!-- مثال پیشرفته با optgroup -->
<label for="language">انتخاب زبان برنامه‌نویسی:</label>
<select name="language" id="language">
  <optgroup label="Front-end">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
  </optgroup>
  <optgroup label="Back-end">
    <option value="php">PHP</option>
    <option value="python">Python</option>
    <option value="nodejs">Node.js</option>
  </optgroup>
</select>

تگ select از چندین ویژگی مهم پشتیبانی می‌کند که در ادامه مهم‌ترین آن‌ها معرفی شده‌اند:

نام فیلد برای ارسال داده انتخاب‌شده به سرور. مقدار این ویژگی به‌عنوان کلید در داده‌های ارسالی استفاده می‌شود.

<select name="language">...</select>

ویژگی id برای اتصال به تگ <label> و نیز برای دسترسی از طریق JavaScript استفاده می‌شود.

<select id="country">...</select>

اگر این ویژگی قرار داده شود، کاربر مجبور است حتماً یک گزینه را انتخاب کند و بدون انتخاب نمی‌تواند فرم را ارسال کند.

<select required>...</select>

اجازه می‌دهد کاربر بیش از یک گزینه را انتخاب کند. ظاهر فیلد به صورت یک لیست قابل انتخاب چندگانه تغییر می‌کند.

<select multiple name="skills[]">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

تعداد گزینه‌های قابل مشاهده در منوی کشویی را مشخص می‌کند. اگر مقدار این ویژگی بیشتر از 1 باشد، ظاهر select از حالت کشویی خارج شده و به شکل یک لیست باز شده نمایش داده می‌شود.

<select size="3">...</select>

با استفاده از این ویژگی، فیلد کشویی غیرفعال شده و کاربر نمی‌تواند آن را انتخاب یا تغییر دهد.

<select disabled>...</select>

تگ <select> از Global Attributes در HTML پشتیبانی می‌کند.

تگ <select> از Event Attributes مانند onchange، onfocus و onblur پشتیبانی می‌کند.

تگ <option> برای تعریف گزینه‌های قابل انتخاب در منوی کشویی (تگ <select>) استفاده می‌شود. این تگ دارای چند ویژگی مهم است:

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

<option value="iran">ایران</option>

این ویژگی مشخص می‌کند که گزینه مورد نظر به صورت پیش‌فرض انتخاب شده باشد.

<option value="tehran" selected>تهران</option>

با استفاده از این ویژگی، گزینه مورد نظر غیرفعال می‌شود و کاربر نمی‌تواند آن را انتخاب کند.

<option value="x" disabled>این گزینه غیرفعال است</option>

تگ <optgroup> برای دسته‌بندی گزینه‌ها در یک منوی کشویی استفاده می‌شود. تنها ویژگی اختصاصی آن label است:

این ویژگی عنوان گروه را مشخص می‌کند و در لیست کشویی به‌عنوان تیتر نمایش داده می‌شود. هیچ گزینه‌ای نمی‌تواند مستقیماً داخل <select> قرار گیرد مگر اینکه داخل <option> یا <optgroup> باشد.

<optgroup label="زبان‌های سمت کلاینت">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</optgroup>

در صورت استفاده، تمام گزینه‌های داخل گروه غیرفعال می‌شوند و کاربر نمی‌تواند آن‌ها را انتخاب کند.

<optgroup label="زبان‌های غیر فعال" disabled>
  <option>Cobol</option>
  <option>Pascal</option>
</optgroup>

مرورگرها تگ <select> را به صورت کشویی نمایش می‌دهند و بسته به سیستم عامل و مرورگر، ظاهر آن کمی متفاوت است. در حالت چندگانه (multiple)، ظاهر آن شبیه به یک لیست با اسکرول می‌شود.

select {
  display: inline-block;
  font-size: 1em;
  padding: 3px;
}