Form inputs use appropriate types for mobile keyboards

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.

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.

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

• ID: mobile-responsiveness.touch.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:

  <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]*" />