Chapter 22: Text Input Types & Attributes

type="text" – Single Line Text Input

The universal text conduit: Fallback mechanics, single-line text buffers, mobile keyboard configurations, and accessible name computation.

LEARNING OBJECTIVES ⌵

Understand the internal line-stripping and text normalization mechanics of single-line text fields.
Configure virtual mobile keyboards using the inputmode and enterkeyhint attributes without altering form submission data types.
Control client-side text ergonomics using autocapitalize, autocorrect, and spellcheck.
Master the W3C Accessible Name Computation (AccName 1.2) algorithm for single-line text inputs.

🎬 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 filling out a physical passport application form. You are given a small, single-height rectangular white box labeled "First Name".

+-------------------------------------------------------------+
| First Name: [ J A N E                                     ] |
+-------------------------------------------------------------+

Because the box is only one line tall, you cannot press "Return" and start writing a second paragraph underneath. If you try to write two lines of text inside that box, the postal clerk will hand it back or strike it through. Furthermore, depending on the field (such as "PIN Code" vs "Street Address"), an assistant might hand you a specialized numeric stamp instead of a calligraphy pen.

In HTML, <input type="text"> is that exact single-line bounded box. It is the baseline workhorse of web forms. Regardless of whether you paste a ten-page essay with fifty paragraphs into a type="text" field, the browser's rendering engine automatically strips or collapses line breaks into a single continuous stream of characters.

Technical Deep Dive & Specifications

The Single-Line Buffer & Text Normalization

Under the WHATWG specification, the text state represents a single line of plain text. When text is inserted into an <input type="text"> (either via user typing, clipboard paste, or DOM scripting):

Newline Stripping: Any Carriage Return (\r) or Line Feed (\n) characters are converted to spaces or stripped entirely, preventing multi-line entries.
Text Directionality: Bidirectional text (combining Left-to-Right English with Right-to-Left Arabic/Hebrew) is rendered using the Unicode Bidirectional Algorithm (Bidi).

User pastes text:
"Line One\nLine Two\r\nLine Three"
                 |
                 v [HTML Input Normalization Engine]
Result in buffer:
"Line One Line Two Line Three"

Mobile Ergonomics: `inputmode` & `enterkeyhint`

A common junior mistake is changing type="text" to type="number" or type="tel" merely to bring up a specific mobile keyboard on smartphones. However, doing so triggers unwanted numeric stepper arrows, scientific notation parsing (1e5), or aggressive validation rules.

The modern standard separates data type semantics from keyboard presentation using the inputmode and enterkeyhint attributes:

+-------------------------------------------------------------------------------+
|                             VIRTUAL KEYBOARD ENGINE                           |
+-------------------------------------------------------------------------------+
        |                                                   |
        v                                                   v
  [inputmode="numeric"]                             [enterkeyhint="search"]
  Displays numeric keypad (0-9)                     Changes action button to
  without altering DOMString type                   "Search" magnifying glass

The `inputmode` Matrix

`inputmode` Value	Mobile Keyboard Displayed	Best Use Case
`text` (default)	Standard alphanumeric keyboard	General text, names, descriptions
`numeric`	Digits `0–9` keypad	Credit card numbers, OTP / 2FA codes, PINs
`decimal`	Digits `0–9` plus decimal separator (`.` or `,`)	Monetary amounts, currency entries
`tel`	Phone dial pad (`0-9`, `*`, `#`, `+`)	Phone numbers (when not using `type="tel"`)
`search`	Alphanumeric with dedicated "Search" key	Search bars and filter fields
`email`	Alphanumeric with `@` and `.com` shortcuts	Email fields
`url`	Alphanumeric with `/` and `.com` shortcuts	Website addresses
`none`	Suppresses virtual keyboard entirely	Custom on-screen virtual keyboards / pinpads

The `enterkeyhint` Attribute

Controls the label/action of the Enter / Return key on virtual mobile keyboards:

enterkeyhint="go" (Label: "Go")
enterkeyhint="done" (Label: "Done" - closes keyboard)
enterkeyhint="next" (Label: "Next" - jumps focus to next field)
enterkeyhint="search" (Label: "Search" or magnifying glass icon)
enterkeyhint="send" (Label: "Send" or paper plane icon)

Text Assistance Attributes

<input 
  type="text"
  name="full_name"
  autocapitalize="words"
  autocorrect="off"
  spellcheck="false"
  autocomplete="name">

autocapitalize: Controls automatic capitalization on mobile devices:
- none or off: No capitalization.
- sentences or on: Capitalizes the first letter of each sentence (default).
- words: Capitalizes the first letter of every word (ideal for First/Last names, cities).
- characters: Capitalizes every character (ideal for Promo Codes, State abbreviations, License plates).
spellcheck: Boolean attribute (true or false) controlling native browser red squiggly spell-checking lines.
autocorrect: Non-standard but widely supported Safari/Chromium attribute (on or off) controlling aggressive autocorrect dictionaries.

Accessible Name Computation (AccName 1.2)

Screen readers (such as NVDA, JAWS, VoiceOver) cannot announce an input field intelligently unless it has an accessible name. The W3C Accessible Name and Description Computation specification computes the name according to this deterministic priority order:

                            Accessible Name Priority (AccName 1.2)
                                              |
                     1. Does 'aria-labelledby' exist?
                                    / \
                              Yes  /   \  No
                                  v     \
                [Read referenced element] \
                                           v
                              2. Does 'aria-label' exist?
                                          / \
                                    Yes  /   \  No
                                        v     \
                              [Read aria-label] \
                                                 v
                               3. Is there a linked <label for="id"> or parent <label>?
                                                / \
                                          Yes  /   \  No
                                              v     \
                                    [Read <label> text] \
                                                         v
                                           4. Does 'placeholder' exist?
                                                        / \
                                                  Yes  /   \  No
                                                      v     \
                                            [Read placeholder]v
                                                    5. Does 'title' exist?
                                                              |
                                                              v
                                                    [Read title / Unnamed]

[!IMPORTANT] The gold standard for production HTML is always an explicit <label for="input-id"> association. Never rely on placeholder or title as the primary accessible name.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 26 (<label for="usr-name">Full Legal Name</label>): Programmatically attaches the label to the input via matching id="usr-name", guaranteeing top accessibility compliance under AccName 1.2.
Line 27–34 (<input type="text" ... autocapitalize="words" autocomplete="name">): Configures the mobile IME to capitalize words automatically and instructs the browser's password manager / autofill vault to supply the user's stored legal name.
Line 41–48 (<input ... autocapitalize="characters" enterkeyhint="done">): Optimizes promo code entry by triggering all-caps typing and presenting a "Done" button on virtual keyboards.
Line 57–70 (Selection Range Script): Demonstrates the DOM API (selectionStart, selectionEnd) which allows programmatic manipulation and inspection of the text cursor.

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>Single-Line Text Input Mastery</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; padding: 2rem; max-width: 650px; margin: 0 auto; }
    .form-group { margin-bottom: 1.5rem; }
    label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: #1e293b; }
    .hint { font-size: 0.85rem; color: #64748b; margin-top: 0.25rem; }
    input[type="text"] {
      width: 100%;
      box-sizing: border-box;
      padding: 0.65rem 0.85rem;
      font-size: 1rem;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    input[type="text"]:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }
    .selection-panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1rem; margin-top: 1rem; font-family: monospace; font-size: 0.9rem; }
  </style>
</head>
<body>
  <h1>Text Input Configuration Lab</h1>

<form id="profile-form">
    
    <div class="form-group">
      <label for="usr-name">Full Legal Name</label>
      <input 
        type="text" 
        id="usr-name" 
        name="full_name" 
        autocapitalize="words" 
        autocomplete="name" 
        spellcheck="false"
        placeholder="e.g. Eleanor Vance">
      <div class="hint">Mobile keyboard will automatically capitalize the first letter of each word.</div>
    </div>

<div class="form-group">
      <label for="promo-code">Voucher / Promo Code</label>
      <input 
        type="text" 
        id="promo-code" 
        name="promo_code" 
        autocapitalize="characters" 
        autocorrect="off" 
        spellcheck="false" 
        enterkeyhint="done"
        placeholder="SUMMER2026">
      <div class="hint">Mobile keyboard will lock uppercase mode and display a "Done" action button.</div>
    </div>
  </form>

<div class="selection-panel" id="debug-output">
    Highlight text in either field to inspect cursor selection indices...
  </div>

function logSelection(e) {
      const input = e.target;
      debug.innerHTML = `
        <strong>Active Element:</strong> #${input.id}<br>
        <strong>Live Value:</strong> "${input.value}"<br>
        <strong>Selection Range:</strong> Start: ${input.selectionStart} | End: ${input.selectionEnd} | Selected Text: "${input.value.substring(input.selectionStart, input.selectionEnd)}"
      `;
    }

inputs.forEach(input => {
      input.addEventListener('select', logSelection);
      input.addEventListener('keyup', logSelection);
      input.addEventListener('click', logSelection);
    });
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Text Input Configuration Lab

Full Legal Name
[ e.g. Eleanor Vance                          ]
Mobile keyboard will automatically capitalize the first letter of each word.

Voucher / Promo Code
[ SUMMER2026                                  ]
Mobile keyboard will lock uppercase mode and display a "Done" action button.

Active Element: #promo-code
Live Value: "DISCOUNT50"
Selection Range: Start: 0 | End: 8 | Selected Text: "DISCOUNT"

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Quick-Search & Command Bar

Instructions:

Create a search form with action="/search" and method="GET".
Add a single-line text input with id="global-search", name="query".
Link an explicit <label for="global-search"> with the text "Search Knowledge Base".
Configure the input with:
- inputmode="search" to trigger a mobile search keyboard.
- enterkeyhint="search" to show a search icon on mobile return keys.
- autocapitalize="none" to prevent unwanted initial capitalization.
- autocomplete="off" to prevent native browser history dropdowns from obscuring custom UI results.
Add a button styled with "Search".

🏁 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>Command Bar Challenge</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
    .search-wrapper { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
    label { font-weight: 700; font-size: 1.1rem; color: #0f172a; }
    input[type="text"] {
      flex: 1;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border: 2px solid #94a3b8;
      border-radius: 8px;
    }
    input[type="text"]:focus {
      border-color: #0284c7;
      outline: none;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
    }
    button {
      background: #0284c7;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover { background: #0369a1; }
  </style>
</head>
<body>
  <h1>Documentation Search</h1>

  <form action="/search" method="GET">
    <label for="global-search">Search Knowledge Base</label>
    <div class="search-wrapper">
      <input 
        type="text" 
        id="global-search" 
        name="query" 
        inputmode="search" 
        enterkeyhint="search" 
        autocapitalize="none" 
        autocomplete="off" 
        spellcheck="false"
        placeholder="Type a topic or shortcut (e.g. forms, flexbox)...">
      <button type="submit">Search</button>
    </div>
  </form>
</body>
</html>

Why this works:

The form adheres strictly to AccName 1.2 with an accessible <label for="global-search">.
inputmode="search" and enterkeyhint="search" instruct mobile devices to configure their touch keyboards for instant search execution.
autocapitalize="none" prevents keywords like flexbox from being automatically mutated into Flexbox.

⚠️ Common Pitfalls

Using type="number" for Credit Cards or OTP Codes: type="number" strips leading zeroes (turning 0123 into 123), adds numeric increment spinners, and allows scientific notation (e). Use <input type="text" inputmode="numeric" pattern="[0-9]*"> instead.
Forgetting for/id on Labels: Placing a <label>Name:</label> next to <input type="text"> without a matching for="id" creates an orphan label. Screen reader users will hear "Edit text, blank" without knowing what information is requested.
Relying on JavaScript Keypress Interception for Capitalization: Don't use JavaScript oninput = (e) => e.target.value.toUpperCase() when autocapitalize="characters" achieves mobile IME lock natively and CSS text-transform: uppercase handles presentation cleanly.

💡 Pro Tips

Programmatic Cursor Control with setRangeText(): Use input.setRangeText(replacement, start, end, 'select') to insert tokens, markdown tags, or emojis at the exact cursor position without breaking browser undo/redo history stacks.
Combine autocomplete with type="text" for Instant Conversions: Always specify granular WHATWG autocomplete tokens (e.g., autocomplete="address-line1", autocomplete="one-time-code", autocomplete="cc-number"). This boosts form completion rates by over 30% on mobile browsers.

📌 Key Takeaways

<input type="text"> enforces a single-line plain text buffer; newlines are automatically normalized or stripped.
inputmode and enterkeyhint customize mobile virtual touch keyboards without changing form serialization types.
autocapitalize, autocorrect, and spellcheck provide fine-grained control over client-side text editing ergonomics.
Accessible Name Computation prioritizes aria-labelledby > aria-label > <label> > placeholder > title.
Standard <label for="id"> association remains the universal industry best practice for accessibility.
--

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

? Question 1 / 3

What is the best way to prompt a mobile device to open a numeric keypad for a 6-digit SMS verification code while preserving leading zeros?

Topic: HTML Fundamentals

? Question 2 / 3

According to the W3C Accessible Name Computation algorithm (AccName 1.2), which of the following takes the HIGHEST precedence for an input's accessible name?

Topic: HTML Fundamentals

? Question 3 / 3

What happens if a user pastes the string `"Hello\nWorld"` into an `<input type="text">`?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Single-Line Buffer & Text Normalization

Mobile Ergonomics: inputmode & enterkeyhint

The inputmode Matrix

The enterkeyhint Attribute

Text Assistance Attributes

Accessible Name Computation (AccName 1.2)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Quick-Search & Command Bar

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

What is the best way to prompt a mobile device to open a numeric keypad for a 6-digit SMS verification code while preserving leading zeros?

According to the W3C Accessible Name Computation algorithm (AccName 1.2), which of the following takes the HIGHEST precedence for an input's accessible name?

What happens if a user pastes the string "Hello\nWorld" into an <input type="text">?

Mobile Ergonomics: `inputmode` & `enterkeyhint`

The `inputmode` Matrix

The `enterkeyhint` Attribute

What happens if a user pastes the string `"Hello\nWorld"` into an `<input type="text">`?