🎛️ Chapter 23: Selection & Choice Inputs

The size Attribute on select

Scrollable listbox presentation, fixed-row viewport dimensioning, single vs multi-choice ergonomics, and accessibility considerations.

LEARNING OBJECTIVES ⌵

Understand how the size attribute controls the visible row count and presentation mode of <select>.
Differentiate between a single-selection listbox (size="N") and a multi-selection listbox (multiple size="N").
Analyze the difference between <input size> (character width) and <select size> (row height).
Navigate mobile browser behaviors and responsive layout adaptations for scrollable listboxes.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine an elevator control console in a 50-story skyscraper:

+-------------------------------------------------------------+
|                      ELEVATOR CONSOLE                       |
|                                                             |
| Option A: Standard Dropdown (size="1")                      |
| [ Floor: Floor 14                                         v ]
| (Must tap to open the full list of 50 floors)               |
|                                                             |
| Option B: Scrollable Listbox Viewport (size="6")            |
| +---------------------------------------------------------+ |
| | Floor 12: Executive Suites                              | |
| | Floor 13: Technical Support                             | |
| | Floor 14: Engineering Labs                              |*| <-- Scrollbar
| | Floor 15: Data Center                                   |#|
| | Floor 16: Legal & Compliance                            |#|
| | Floor 17: Human Resources                               | |
| +---------------------------------------------------------+ |
+-------------------------------------------------------------+

Instead of requiring the user to click and expand a floating popup window, Option B presents a fixed 6-row viewing window directly on the screen. Users can immediately see a cluster of neighboring choices and scroll smoothly through the rest of the list.

In HTML forms, the size attribute on <select> controls the height of this visible viewing window, converting a collapsed single-line dropdown into an expanded, scrollable Listbox widget.

Technical Deep Dive & Specifications

The Specification & Dimensioning Rules

On a <select> element, the size attribute specifies the number of visible options (rows) displayed in the viewport.

+-------------------------------------------------------------------------------+
|                       <select size="N"> BEHAVIOR MATRIX                       |
+-------------------------------------------------------------------------------+

  Markup                     Presentation Mode            Selection Capability
  ------------------------------------------------------------------------------
  <select>                   Collapsed Dropdown Popup     Single Item Only
  <select size="1">          Collapsed Dropdown Popup     Single Item Only
  <select size="5">          Expanded Scrollable Listbox  Single Item Only
  <select multiple>          Expanded Scrollable Listbox  Multiple Items (default 4)
  <select multiple size="8"> Expanded Scrollable Listbox  Multiple Items (8 rows)

`<input size>` vs `<select size>`: A Critical Distinction

Do not confuse the size attribute on text inputs with the size attribute on select controls:

Element	Attribute	Measurement Unit	Purpose
`<input type="text" size="20">`	`size`	Typographic character width (`ch`)	Horizontal width
`<select size="5">`	`size`	Number of visible `<option>` rows	Vertical viewport height

The Single-Selection Listbox Pattern

When size > 1 is applied to a <select> without the multiple attribute:

The element renders as an expanded rectangular list box.
The user can only select one item at a time.
Clicking any option immediately selects it without needing modifier keys.
Arrow keys (Up / Down) scroll and update the active selection in real time.

This pattern is ideal for desktop dashboards where users need to rapidly browse through a list of database tables, log channels, or email folders with high visual density.

+------------------------------------+
| 📁 inbox_2026                      |
| 📁 sent_mail                       |
| 📁 draft_proposals                 |  <-- Single click selects 1 row
| 📁 archive_raw                   |#|  <-- Vertical scrollbar
| 📁 spam_quarantine                 |
+------------------------------------+

Mobile Operating System Quirks

On mobile touchscreens (especially iOS Safari and mobile Chrome):

Mobile browsers frequently override <select size="N"> and continue to render their native modal bottom sheets or spinning wheel pickers when tapped.
Because touch devices lack scrollbars on native form controls, fixed-size desktop listboxes do not translate 1:1 to mobile UI.
If a custom scrollable list is mandatory on mobile, build a responsive radio/checkbox group or a CSS-overflow container.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 66 (<select ... size="6">): Specifies a visible height of exactly 6 rows. The 7th and 8th options are accessible via the native vertical scrollbar.
Single-Selection Behavior: Notice that the multiple attribute is absent. Clicking any log channel immediately highlights only that channel.
Line 67 (selected): Sets auth_service as the initial active row.
Lines 85–90 (Script): Updates the connection status panel in real time as the user navigates through rows using arrow keys or mouse clicks.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrollable Listbox with size Attribute</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 2rem;
      background: #f8fafc;
      color: #0f172a;
    }
    .console-card {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 1.5rem;
      max-width: 480px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    label {
      font-weight: 700;
      font-size: 0.95rem;
      color: #1e293b;
    }
    /* Listbox styling */
    select.listbox {
      width: 100%;
      border: 1.5px solid #94a3b8;
      border-radius: 6px;
      padding: 0.35rem;
      font-size: 0.95rem;
      font-family: monospace;
      background-color: #ffffff;
    }
    select.listbox option {
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      cursor: pointer;
    }
    select.listbox option:checked {
      background: #2563eb linear-gradient(0deg, #2563eb 0%, #2563eb 100%);
      color: #ffffff;
    }
    .status-panel {
      margin-top: 1.25rem;
      padding: 0.75rem;
      background: #f1f5f9;
      border-radius: 6px;
      font-size: 0.85rem;
    }
    button {
      margin-top: 1rem;
      padding: 0.6rem 1.2rem;
      background: #0f172a;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="console-card">
    <h2>Server Log Channel Stream</h2>

<form id="log-form" action="/api/logs/stream" method="POST">
      <div class="field-group">
        <label for="log-channel">Select Active Log Channel (size="6")</label>
        
        
        <select id="log-channel" name="channel_id" size="6" class="listbox" required>
          <option value="auth_service" selected>auth-service.production.log (1.2 MB/s)</option>
          <option value="billing_api">billing-api.production.log (450 KB/s)</option>
          <option value="payment_gateway">payment-gateway.stripe.log (890 KB/s)</option>
          <option value="redis_cache">redis-cluster-cache.log (3.4 MB/s)</option>
          <option value="worker_cron">worker-cron-daemon.log (120 KB/s)</option>
          <option value="ingress_nginx">ingress-nginx-lb.log (15.8 MB/s)</option>
          <option value="database_replica">db-replica-postgres.log (2.1 MB/s)</option>
          <option value="search_elastic">elasticsearch-query.log (4.7 MB/s)</option>
        </select>
      </div>

<div class="status-panel">
        Connected Stream: <strong id="stream-name">auth_service</strong>
      </div>

<button type="submit">Attach Live Tail</button>
    </form>
  </div>

logPicker.addEventListener('change', () => {
      streamName.textContent = logPicker.value;
    });
  </script>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+-----------------------------------------------------------+
| Server Log Channel Stream                                 |
|                                                           |
| Select Active Log Channel (size="6")                      |
| +-------------------------------------------------------+ |
| | > auth-service.production.log (1.2 MB/s) [SELECTED]   | |
| |   billing-api.production.log (450 KB/s)               | |
| |   payment-gateway.stripe.log (890 KB/s)               |*| <-- Scrollbar
| |   redis-cluster-cache.log (3.4 MB/s)                  |#|
| |   worker-cron-daemon.log (120 KB/s)                   |#|
| |   ingress-nginx-lb.log (15.8 MB/s)                    | |
| +-------------------------------------------------------+ |
|                                                           |
| Connected Stream: auth_service                            |
| [ Attach Live Tail ]                                      |
+-----------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build a High-Density Database Table Schema Inspector

Instructions:

Create a database admin inspection form.
Add a <select id="table-inspector" name="table_name" size="5" required> listbox.
Populate the listbox with at least 8 database table names (e.g., users_v2, orders_2026, audit_events, products_inventory, sessions_cache, invoices_archive, api_tokens, webhooks_queue).
Pre-select users_v2 with selected.
Style the listbox with a fixed monospace font and responsive border styling.
Test navigating the listbox purely using the keyboard (Tab to focus, Down Arrow / Up Arrow to cycle rows).

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Database Inspector Challenge - Solution</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 2rem;
      background: #0f172a;
      color: #f8fafc;
    }
    .inspector-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 8px;
      padding: 1.5rem;
      max-width: 480px;
    }
    label {
      display: block;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }
    select.schema-listbox {
      width: 100%;
      background: #0f172a;
      color: #38bdf8;
      border: 1.5px solid #475569;
      border-radius: 6px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.95rem;
      padding: 0.5rem;
    }
    select.schema-listbox option {
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
    }
    select.schema-listbox option:checked {
      background: #0284c7;
      color: #ffffff;
    }
    button {
      margin-top: 1.25rem;
      padding: 0.75rem 1.5rem;
      background: #38bdf8;
      color: #0f172a;
      font-weight: 700;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: #7dd3fc;
    }
  </style>
</head>
<body>

  <div class="inspector-card">
    <h2 style="color: #ffffff; margin-top: 0;">PostgreSQL Cluster 01</h2>

    <form action="/admin/schema/inspect" method="POST">
      <label for="table-inspector">Select Database Table to Inspect (size="5")</label>

      <select id="table-inspector" name="table_name" size="5" class="schema-listbox" required>
        <option value="users_v2" selected>public.users_v2 (245,901 rows)</option>
        <option value="orders_2026">public.orders_2026 (1,480,210 rows)</option>
        <option value="audit_events">audit.audit_events (12,904,112 rows)</option>
        <option value="products_inventory">inventory.products_inventory (4,120 rows)</option>
        <option value="sessions_cache">auth.sessions_cache (89,400 rows)</option>
        <option value="invoices_archive">billing.invoices_archive (340,910 rows)</option>
        <option value="api_tokens">security.api_tokens (1,890 rows)</option>
        <option value="webhooks_queue">messaging.webhooks_queue (54 rows)</option>
      </select>

      <button type="submit">Inspect Table Schema</button>
    </form>
  </div>

</body>
</html>

Why this works:

The listbox displays exactly 5 tables in the viewport with a vertical scrollbar for the remaining 3 tables.
Because multiple is omitted, users can single-click or use arrow keys to navigate table selection without modifier keys.
Dark theme monospace typography provides high-density developer ergonomics.

⚠️ Common Pitfalls

Assuming size="5" Enables Multiple Selection: Adding size="5" does not allow multi-selection. It only sets the visible row height. To allow multi-selection, you must explicitly include the multiple attribute.
Forgetting Mobile Viewport Testing: Setting a large size (e.g., size="12") can blow out vertical layout space on mobile screens. Use CSS @media queries to adjust heights responsively.
Confusing <input size> with <select size>: On text inputs, size sets character column width (width: N ch); on select elements, size sets vertical row count (rows: N).

💡 Pro Tips

Default size Rules:
- Standard <select>: default size="1" (popup dropdown).
- <select multiple>: default size="4" (4-row listbox).
Scroll-Into-View on Focus: When users navigate long listboxes with keyboard arrow keys, browsers automatically scroll the active option into view inside the viewport.

📌 Key Takeaways

The size attribute on <select> specifies the number of visible rows rendered in the listbox.
Applying size > 1 without multiple creates a single-selection listbox where users pick one item by clicking directly.
The default size for standard dropdowns is 1; the default for <select multiple> is 4.
Unlike text inputs where size controls character width, <select size> controls vertical option rows.
Mobile devices may override size in favor of full-screen touch pickers.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

What presentation format does a browser render when given `<select size="5">` (without the `multiple` attribute)?

Topic: HTML Fundamentals

? Question 2 / 3

What is the default `size` value of an `<input type="text">` vs a `<select multiple>`?

Topic: HTML Fundamentals

? Question 3 / 3

If a `<select size="4">` contains 10 child `<option>` tags, how do users view the remaining 6 options?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Specification & Dimensioning Rules

<input size> vs <select size>: A Critical Distinction

The Single-Selection Listbox Pattern

Mobile Operating System Quirks

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a High-Density Database Table Schema Inspector

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What presentation format does a browser render when given <select size="5"> (without the multiple attribute)?

What is the default size value of an <input type="text"> vs a <select multiple>?

If a <select size="4"> contains 10 child <option> tags, how do users view the remaining 6 options?

`<input size>` vs `<select size>`: A Critical Distinction

What presentation format does a browser render when given `<select size="5">` (without the `multiple` attribute)?

What is the default `size` value of an `<input type="text">` vs a `<select multiple>`?

If a `<select size="4">` contains 10 child `<option>` tags, how do users view the remaining 6 options?