Chapter 25: Form Attributes, Organization & Accessibility

The enterkeyhint Attribute

Customizing mobile virtual keyboard action keys (`enter`, `done`, `go`, `next`, `previous`, `search`, `send`), multi-step wizard ergonomics, and IME integration.

LEARNING OBJECTIVES ⌵

Understand how the global enterkeyhint attribute customizes the action key label and icon on mobile virtual keyboards.
Master the complete enumeration of enterkeyhint values: enter, done, go, next, previous, search, and send.
Align enterkeyhint semantics with user intent: using next for sequential form fields and send / go for final submission controls.
Implement seamless mobile field progression by pairing enterkeyhint="next" with standard JavaScript focus-advance listeners.

🎬 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 walking through a high-security office building with a series of automated doors.

At Door 1, the digital button on the wall is glowing blue and clearly labeled "CONTINUE TO NEXT ROOM". You tap it, and the next door opens.
At the final security checkpoint, the button changes color and reads "DISPATCH GUARDS & LOCK VAULT".

Because the button's label dynamically reflects the exact consequence of pressing it, you never hesitate or fear that tapping the button will trigger the wrong action.

On mobile smartphones and tablets, the bottom-right key on the virtual keyboard is that action trigger.

GENERIC / CONFUSING ACTION KEY:
┌────────────────────────────────────────────────────────┐
│  [?123]      [      space      ]      [ return ]       │
└────────────────────────────────────────────────────────┘
Does pressing [return] insert a newline? Submit my order? Close the keyboard?

SEMANTICALLY OPTIMIZED ACTION KEYS (Via enterkeyhint):
┌───────────────────────────┐  ┌───────────────────────────┐  ┌───────────────────────────┐
│ [?123]   [ space ] [ Next]│  │ [?123]   [ space ] [Search│  │ [?123]   [ space ] [ Send]│
└───────────────────────────┘  └───────────────────────────┘  └───────────────────────────┘

By default, mobile keyboards render a vague, ambiguous "Return" or generic arrow icon. The HTML5 enterkeyhint attribute tells the mobile operating system (iOS, Android) exactly what label or icon to render on that action key, communicating clear transactional intent to the user.

Technical Deep Dive & Specifications

The Seven `enterkeyhint` Values

The WHATWG HTML Living Standard specifies seven standardized keywords for enterkeyhint:

+----------------------------------------------------------------------------------------------------+
|                                    ENTERKEYHINT ENUMERATION MATRIX                                 |
+----------------------------------------------------------------------------------------------------+
| Attribute Value | Mobile Action Key Visual (iOS / Android) | Semantic Purpose / Real-World Context |
+-----------------+------------------------------------------+---------------------------------------+
| `next`          | "Next" text / Forward Right Arrow (`➜`)  | Advances focus to next field in form  |
| `previous`      | "Previous" text / Backward Arrow (`⬅`)   | Moves focus to previous field         |
| `go`            | "Go" text / Bold Blue Action Arrow       | Navigates to a URL or initiates task  |
| `send`          | "Send" text / Paper Airplane Icon        | Dispatches a chat message or comment  |
| `search`        | "Search" text / Magnifying Glass Icon (`🔍`)| Submits search queries / filtering |
| `done`          | "Done" text / Checkmark Icon (`✔`)       | Concludes input; closes soft keyboard |
| `enter`         | "Return" text / Newline Arrow (`↵`)      | Inserts carriage return newline       |
+----------------------------------------------------------------------------------------------------+

Platform Rendering Differences

┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                               OPERATING SYSTEM IME PRESENTATION                                    │
├────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ Apple iOS (Safari/WebKit)   │ Renders localized blue action button text: "Next", "Search",         │
│                             │ "Send", "Go", "Done", or "return".                                   │
├─────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ Google Android (Gboard)     │ Renders dynamic icons on the bottom-right key: magnifying glass for   │
│                             │ search, paper plane for send, right arrow for next, check for done.  │
├─────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ Desktop Browsers (Chrome/Mac)│ Has NO visual impact on physical hardware keyboards.                 │
└────────────────────────────────────────────────────────────────────────────────────────────────────┘

[!NOTE] enterkeyhint is an interactive UI hint for Input Method Editors (IMEs) and software keyboards. It has zero visual impact on physical desktop keyboards, but is transformative for mobile conversion rates.

Orchestrating Sequential Forms with `enterkeyhint="next"`

On mobile devices, tapping enterkeyhint="next" does not automatically jump focus to the next field unless implemented natively by the browser or wired via a clean JavaScript helper.

// Universal Next-Field Keyboard Advancement Listener
document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && event.target.getAttribute('enterkeyhint') === 'next') {
    event.preventDefault(); // Prevent form submission
    
    // Find all focusable form controls in DOM order
    const form = event.target.form;
    if (!form) return;
    
    const focusables = Array.from(form.elements).filter(
      el => !el.disabled && el.type !== 'hidden' && el.tabIndex !== -1
    );
    
    const currentIndex = focusables.indexOf(event.target);
    const nextElement = focusables[currentIndex + 1];
    
    if (nextElement) {
      nextElement.focus();
    }
  }
});

The Complete Mobile Input Stack

To build the highest possible fidelity mobile form field, combine all three modern mobile attributes:

<!-- The Holy Trinity of Mobile Form Field Ergonomics -->
<input 
  type="text" 
  id="shipping-zip"
  name="zip"
  inputmode="numeric" 
  enterkeyhint="next" 
  autocomplete="postal-code"
  placeholder="90210"
  required
>

autocomplete="postal-code": Triggers operating system autofill suggestions.
inputmode="numeric": Summons the large 10-digit number keypad.
enterkeyhint="next": Changes the action button to "Next" to continue down the checkout flow.

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

Lines 73 & 78 (enterkeyhint="next"): Configures the mobile virtual keyboard to display "Next" or a forward arrow on the First Name and Last Name inputs.
Line 83 (enterkeyhint="done"): On the final Street Address input, displays "Done" or a checkmark, communicating that the sequential data entry is complete.
Line 97 (enterkeyhint="send"): Shows a paper airplane icon or "Send" button on mobile keyboards in the chat input.
Line 107 (enterkeyhint="search"): Displays a magnifying glass search icon on the search bar's action key.
Lines 112–122 (JavaScript Focus Advancement): Intercepts the Enter keypress when enterkeyhint="next" is present and programmatically shifts focus to the next <input> in sequence.

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Enterkeyhint Attribute Playground</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      padding: 2rem 1rem;
      color: #0f172a;
    }
    .card {
      background: #ffffff;
      max-width: 500px;
      margin: 0 auto 2rem auto;
      padding: 1.75rem;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }
    h2 { margin-top: 0; font-size: 1.25rem; }
    
    .form-group { margin-bottom: 1.25rem; }
    label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.375rem; }
    
    .hint-tag {
      font-size: 0.75rem;
      background: #f1f5f9;
      color: #475569;
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-family: monospace;
      margin-left: 0.5rem;
    }

input[type="text"], input[type="search"], textarea {
      width: 100%;
      padding: 0.625rem 0.875rem;
      font-size: 1rem;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      box-sizing: border-box;
    }
    input:focus, textarea:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

/* Live Chat UI Box */
    .chat-box {
      display: flex;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .btn-send {
      background: #2563eb;
      color: white;
      border: none;
      padding: 0.625rem 1.25rem;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="card">
    <h2>1. Sequential Delivery Form</h2>
    <form id="shipping-form" action="/submit-address" method="POST">
      
      <div class="form-group">
        <label for="fname">First Name <span class="hint-tag">enterkeyhint="next"</span></label>
        <input type="text" id="fname" name="fname" enterkeyhint="next" autocomplete="given-name" required>
      </div>

<div class="form-group">
        <label for="lname">Last Name <span class="hint-tag">enterkeyhint="next"</span></label>
        <input type="text" id="lname" name="lname" enterkeyhint="next" autocomplete="family-name" required>
      </div>

<div class="form-group">
        <label for="address">Street Address <span class="hint-tag">enterkeyhint="done"</span></label>
        <input type="text" id="address" name="address" enterkeyhint="done" autocomplete="street-address" required>
      </div>

<button type="submit" class="btn-send" style="width:100%;">Save Address</button>
    </form>
  </div>

<div class="card">
    <h2>2. Instant Messenger Box</h2>
    <div class="chat-box">
      <input 
        type="text" 
        id="chat-input" 
        placeholder="Type a message..." 
        enterkeyhint="send"
      >
      <button type="button" class="btn-send">Send</button>
    </div>
  </div>

<div class="card">
    <h2>3. Product Catalog Search</h2>
    <input 
      type="search" 
      placeholder="Search electronics, laptops..." 
      enterkeyhint="search"
    >
  </div>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

┌────────────────────────────────────────────────────────┐
│ 1. Sequential Delivery Form                            │
│                                                        │
│ First Name  [enterkeyhint="next"]                      │
│ ┌────────────────────────────────────────────────────┐ │
│ │                                                    │ │ (Soft key shows: "Next")
│ └────────────────────────────────────────────────────┘ │
│ Last Name  [enterkeyhint="next"]                       │
│ ┌────────────────────────────────────────────────────┐ │
│ │                                                    │ │ (Soft key shows: "Next")
│ └────────────────────────────────────────────────────┘ │
│ Street Address  [enterkeyhint="done"]                  │
│ ┌────────────────────────────────────────────────────┐ │
│ │                                                    │ │ (Soft key shows: "Done")
│ └────────────────────────────────────────────────────┘ │
│                                                        │
│ [ Save Address ]                                       │
├────────────────────────────────────────────────────────┤
│ 2. Instant Messenger Box                               │
│ ┌───────────────────────────────────────┬────────────┐ │
│ │ Type a message... [enterkeyhint="send"]│ [ Send ]  │ │ (Soft key shows: "Send")
│ └───────────────────────────────────────┴────────────┘ │
└────────────────────────────────────────────────────────┘

🏋️ Hands-On Exercise

🎯 The Challenge: Optimize the Mobile Checkout Flow

You are optimizing a mobile checkout page. Mobile user testing revealed that users get confused because the mobile keyboard always shows a generic "Return" button on all fields, causing users to accidentally submit the form before completing their address!

Instructions:

Configure enterkeyhint="next" on the First Name, Last Name, and City inputs.
Configure enterkeyhint="search" on the Postal Code lookup input.
Configure enterkeyhint="go" or enterkeyhint="done" on the final Credit Card input.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Unoptimized Mobile Form</title>
</head>
<body>
  <form action="/checkout/complete" method="POST">
    <h2>Mobile Checkout</h2>

<div>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" required>
    </div>

<div>
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" required>
    </div>

<div>
      <label for="zip-lookup">Postal Code Lookup</label>
      <input type="text" id="zip-lookup" name="zip" inputmode="numeric">
    </div>

<div>
      <label for="city">City</label>
      <input type="text" id="city" name="city" required>
    </div>

<div>
      <label for="card">Card Number</label>
      <input type="text" id="card" name="card" inputmode="numeric" required>
    </div>

<button type="submit">Place Order</button>
  </form>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mobile Checkout - Optimized</title>
</head>
<body>
  <form action="/checkout/complete" method="POST">
    <h2>Mobile Checkout</h2>

    <!-- Solution 1: enterkeyhint="next" for sequential inputs -->
    <div>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" enterkeyhint="next" autocomplete="given-name" required>
    </div>

    <div>
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" enterkeyhint="next" autocomplete="family-name" required>
    </div>

    <!-- Solution 2: enterkeyhint="search" for postal code lookup -->
    <div>
      <label for="zip-lookup">Postal Code Lookup</label>
      <input type="text" id="zip-lookup" name="zip" enterkeyhint="search" inputmode="numeric" autocomplete="postal-code">
    </div>

    <div>
      <label for="city">City</label>
      <input type="text" id="city" name="city" enterkeyhint="next" autocomplete="address-level2" required>
    </div>

    <!-- Solution 3: enterkeyhint="go" for final transaction trigger -->
    <div>
      <label for="card">Card Number</label>
      <input type="text" id="card" name="card" enterkeyhint="go" inputmode="numeric" autocomplete="cc-number" required>
    </div>

    <button type="submit" style="margin-top:1rem;">Place Order</button>
  </form>
</body>
</html>

Why this works:

Each input explicitly dictates the action key on mobile virtual keyboards: next keeps users flowing through fields, search indicates a lookup utility, and go signals the final payment submission.

⚠️ Common Pitfalls

Expecting enterkeyhint to Auto-Advance Focus Without JS: Setting enterkeyhint="next" changes the visual label on the keyboard. In standard web forms, pressing Enter still submits the form by default unless you handle the keydown event in JavaScript.
Using enterkeyhint="send" on Standard Multiline Textareas: On large textareas where users write paragraphs, using send may confuse users who expect Return to insert a newline. Use enterkeyhint="enter" on standard textareas.
Invalid Keyword Values: Values like enterkeyhint="submit" or enterkeyhint="continue" are invalid keywords and will default to standard enter.

💡 Pro Tips

Chat App Ergonomics: For instant messaging apps, use enterkeyhint="send" on single-line inputs (<input type="text">), and allow Shift+Enter to insert newlines if using a <textarea>.
Combine with inputmode and autocomplete: Never use enterkeyhint in isolation. Always specify the full trio: inputmode (keypad shape), enterkeyhint (action button label), and autocomplete (credential autofill).

📌 Key Takeaways

The enterkeyhint attribute customizes the action button label/icon on mobile touchscreen virtual keyboards.
The 7 standardized keywords are: enter, done, go, next, previous, search, and send.
Use enterkeyhint="next" on sequential form fields to visually prompt users to continue.
Use enterkeyhint="send" on chat and comment inputs, and enterkeyhint="search" on search bars.
Pairing enterkeyhint="next" with a small JavaScript listener creates seamless native-app-like focus advancement.
--

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

? Question 1 / 3

Which `enterkeyhint` value should be used on an instant chat messenger text input to display a "Send" or paper airplane icon on mobile virtual keyboards?

Topic: HTML Fundamentals

? Question 2 / 3

What happens if a developer specifies an unrecognized value like `enterkeyhint="proceed"`?

Topic: HTML Fundamentals

? Question 3 / 3

Does declaring `enterkeyhint="next"` on an `<input>` automatically shift focus to the next input when pressed on standard HTML forms without JavaScript?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Seven enterkeyhint Values

Platform Rendering Differences

Orchestrating Sequential Forms with enterkeyhint="next"

The Complete Mobile Input Stack

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Optimize the Mobile Checkout Flow

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which enterkeyhint value should be used on an instant chat messenger text input to display a "Send" or paper airplane icon on mobile virtual keyboards?

What happens if a developer specifies an unrecognized value like enterkeyhint="proceed"?

Does declaring enterkeyhint="next" on an <input> automatically shift focus to the next input when pressed on standard HTML forms without JavaScript?

The Seven `enterkeyhint` Values

Orchestrating Sequential Forms with `enterkeyhint="next"`

Which `enterkeyhint` value should be used on an instant chat messenger text input to display a "Send" or paper airplane icon on mobile virtual keyboards?

What happens if a developer specifies an unrecognized value like `enterkeyhint="proceed"`?

Does declaring `enterkeyhint="next"` on an `<input>` automatically shift focus to the next input when pressed on standard HTML forms without JavaScript?