لیست باکس List box

لیست باکس یا List box چیست؟

لیست باکس (List box) یا جعبه فهرست یکی از انواع ویجت های رابط کاربری گرافیکی است که تعدادی عنصر یا آیتم (Item) را در قالب یک لیست به کاربر نمایش می‌دهد و در عین حال امکان انتخاب یک یا چند عنصر موجود در لیست را فراهم می‌کند.

ویژگی های ظاهری و انواع لیست باکس ها

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

در ساده‌ترین حالت، هر عنصر در List box فضایی تک خطی را به خود اختصاص می‌دهد. کاربر می‌تواند بسته به نوع لیست باکس، یک یا چند عنصر را در آن انتخاب کند. عناصر انتخابی در حالت رایج با رنگی متمایز هایلایت می‌شوند.

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

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

تعامل با List box و انتخاب عناصر

در یک List box تک انتخابی، کاربر می‌تواند با کلیک یا لمس یک عنصر آن را انتخاب کند. فراموش نکنید در حالت عادی، کلیک روی یک عنصر دیگر باعث می‌شود عنصر قبلی از حالت انتخاب شده خارج شود و عنصر جدید انتخاب شود.

در یک List box معمولی با امکان انتخاب چند عنصر، کاربر می‌تواند ابتدا به شیوه عادی با کلیک روی یکی از عناصر، آن را انتخاب کند. سپس با پایین نگه داشتن کلید Ctrl هنگام کلیک روی سایر عناصر، آن‌ها را نیز یکی پس از دیگری انتخاب نماید. اگر عناصری که می‌خواهید انتخاب کنید کنار یکدیگر قرار دارند می‌توانید پس از انتخاب عنصر اول، کلید Shift را پایین نگه دارید و روی عنصر آخر از عناصر موردنظر کلیک کنید. به این ترتیب، علاوه بر این دو عنصر تمام عناصر مابین آن‌ها نیز انتخاب می‌شوند.

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

لیست باکس در مقایسه با سایر المان های کنترل گرافیکی

ویجت های کنترل گرافیکی متعددی وجود دارند که امکان انتخاب عناصر را فراهم می‌کنند. از جمله ساده‌ترین این ویجت‌ها می‌توان به دکمه های رادیویی و چک باکس ها اشاره کرد. این ویجت ها بسته به نوع خود به کاربر اجازه می‌دهند یک یا چند مقدار را از میان مقادیری مشخص انتخاب کنند. با این حال اگر تعداد عناصر موردنظر زیاد باشد استفاده از دکمه های رادیویی یا چک باکس های متعدد می‌تواند باعث شلوغی رابط کاربری و سردرگمی کاربر شود. اینجاست که استفاده از ویجت‌هایی نظیر لیست باکس و لیست کشویی (Dropdown list) می‌تواند راهگشا باشد و لیستی طولانی از عناصر را در یک فضای محدود نمایش دهد.

تفاوت های لیست‌باکس با لیست کشویی

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

در عین حال، لیست کشویی فضای کمتری در مقایسه با لیست باکس اشغال می‌کند. از طرفی برای دسترسی به عناصر یک لیست کشویی می‌بایست ابتدا آن را باز کنید در حالیکه کاربر برای تعامل با یک لیست باکس هزینه کمتری را متحمل می‌شود و بدون نیاز به باز کردن آن می‌تواند عناصر لیست را مشاهده کند.

از سوی دیگر کار با لیست کشویی برای اغلب کاربران آسان است. این درحالیست که کاربران مبتدی ممکن است با روش‌های انتخاب چند عنصر در لیست باکس ها (با کمک کلیدهای Ctrl و Shift) آشنا نباشند. در عین حال به دلیل اشغال فضای کمتر در لیست های کشویی، امکان دیده نشدن آن‌ها افزایش پیدا می‌کند.

لیست باکس در HTML

در HTML برای ساخت لیست باکس از المان های <select> و <option> مشابه با مثال زیر استفاده می‌شود:

<form action="/action_page.php">
  <label for="items">Choose an item:</label>
  <select multiple name="items" id="items" size="4">
    <option value="item1">Item1</option>
    <option value="item2">Item2</option>
    <option value="item3">Item3</option>
    <option value="item4">Item4</option>
    <option value="item5">Item5</option>
    <option value="item6">Item6</option>
    <option value="item7">Item7</option>
    <option value="item8">Item8</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

خصوصیت id در تگ <select>، برچسب یا المان <label> را به List box اختصاص می‌دهد. از خصوصیت name هم به منظور نام‌گذاری داده ارسالی برای سرور استفاده می‌شود. هر عنصر لیست نیز با کمک یک المان <option> مشخص می‌شود. تصویر زیر نتیجه قطعه کد فوق را نمایش می‌دهد:

خصوصیت size و multiple در تگ شروع <select>

خصوصیت size در تگ شروع <select>، اندازه List box را مشخص می‌کند. در مثال فوق، مقدار 4 برای این خصوصیت باعث می‌شود چهار عنصر لیست آشکار باشند.

درج خصوصیت multiple در تگ شروع المان <select>، امکان انتخاب چند عنصر در List box های HTML را فراهم می‌کند. در نبود این خاصیت، کاربر تنها می‌تواند یک عنصر را از لیست انتخاب کند.