# Form inputs use appropriate types for mobile keyboards

- **Pattern:** `ab-001927` (`mobile-responsiveness.touch.input-types`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001927
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001927)

## Why it matters

An email field with `type="text"` gives mobile users the default alphabetic keyboard with no `@` key and no autocomplete hint to the browser. Phone fields with `type="text"` force the user to hunt for numeric keys on a letter keyboard. Beyond typing friction, the wrong input type blocks browser-native validation, autofill, and password manager integrations. Correct input types are a two-character change that materially improves mobile form completion rates.

## Severity rationale

Medium because wrong input types add friction to every form submission on mobile, reducing conversion across sign-up and checkout.

## Remediation

Set `type` to match the data: `email`, `tel`, `number`, `url`. When formatting constraints rule out `type="number"` (e.g., credit card with spaces), use `type="text" inputmode="numeric" pattern="[0-9]*"` to get the numeric keyboard without losing the formatting control.

```html
<input type="email" />
<input type="tel" />
<input type="text" inputmode="numeric" pattern="[0-9]*" />
```

## Detection

- **ID:** `input-types`
- **Severity:** `medium`
- **What to look for:** Examine form input elements. Check the `type` attribute on `<input>` elements. Look for inputs collecting email addresses using `type="text"`, phone numbers using `type="text"`, numeric values using `type="text"`, and URLs using `type="text"`. Also check for `inputmode` attribute usage where `type="text"` is intentionally retained.
- **Pass criteria:** Count all `<input>` elements that collect email addresses, phone numbers, numeric values, or URLs. For each, verify the `type` attribute matches the input purpose: `type="email"` for email, `type="tel"` for phone, `type="number"` for numeric, `type="url"` for URLs. An `inputmode` attribute is an acceptable alternative when `type="text"` must be retained. Report: "X of Y specialized inputs use the correct type or inputmode." No more than 0 specialized inputs may use `type="text"` without an appropriate `inputmode`.
- **Fail criteria:** At least 1 email, phone, number, or URL input uses `type="text"` without an appropriate `inputmode` attribute — mobile users will not get the optimized keyboard.
- **Skip (N/A) when:** Never.
- **Detail on fail:** `"Email input in sign-up form uses type='text' instead of type='email' — 1 of 4 specialized inputs lacks correct type, mobile users won't get the email keyboard"`.
- **Remediation:**

  ```html
  <input type="email" />        <!-- @ symbol on keyboard -->
  <input type="tel" />          <!-- numeric keypad -->
  <input type="number" />       <!-- number keyboard -->
  <input type="url" />          <!-- .com key and slash -->

  <!-- For formatted inputs where type='number' causes issues: -->
  <input type="text" inputmode="numeric" pattern="[0-9]*" />
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001927