Missing Input Types

Using type='text' for everything means your visitors get a QWERTY keyboard when they need a number pad. Use the right input types.

What is this?

Picture this: you are on your phone, trying to enter your credit card number, and the keyboard that pops up is the full QWERTY layout instead of the number pad. You are pecking at tiny number keys along the top row, fat-fingering digits, getting frustrated. All because the developer used type="text" instead of type="tel". That is what wrong input types do — they force your visitors to fight the interface instead of just filling in the form.

Why it matters

For your visitors: The right input type triggers the right keyboard on mobile devices. type="email" shows the @ key front and centre. type="tel" brings up the number pad. type="url" puts the slash and .com within easy reach. Get this wrong and your visitors are hunting for characters on a keyboard that was not designed for what they are typing.
For your business: Mobile users are over half your traffic. If your checkout form makes them struggle to type their phone number or email, they will abandon it. This is especially brutal on payment forms where precision matters — wrong keyboard equals wrong numbers equals failed transactions.
The standard: HTML provides specific input types for a reason. Using type="email", type="tel", type="url", type="number", and type="search" gives browsers built-in validation and mobile devices the correct keyboard. There is zero downside.

Correct input types

<input type="email" name="email" />
<input type="tel" name="phone" />
<input type="url" name="website" />
<input type="number" name="quantity" min="1" max="99" />
<input type="search" name="q" />
<input type="password" name="password" autocomplete="new-password" />

Everything is type='text'

<input type="text" name="email" />
<input type="text" name="phone" />
<input type="text" name="website" />
<input type="text" name="quantity" />
<input type="text" name="q" />
<input type="text" name="password" />
<!-- Wrong keyboard, no validation, no autocomplete -->

How to fix it

React / Next.js

Here is a reference for the most commonly needed input types with their proper attributes:

function ContactForm() {
  return (
    <form className="flex flex-col gap-4">
      {/* Email — shows @ key on mobile keyboards */}
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        autoComplete="email"
        inputMode="email"
        placeholder="you@example.com"
      />

      {/* Phone — shows number pad on mobile */}
      <label htmlFor="phone">Phone</label>
      <input
        id="phone"
        type="tel"
        autoComplete="tel"
        inputMode="tel"
        placeholder="+44 7700 900000"
      />

      {/* Website — shows .com and / keys on mobile */}
      <label htmlFor="website">Website</label>
      <input
        id="website"
        type="url"
        autoComplete="url"
        inputMode="url"
        placeholder="https://yoursite.com"
      />

      {/* Quantity — number pad with stepper arrows */}
      <label htmlFor="qty">Quantity</label>
      <input id="qty" type="number" min={1} max={99} inputMode="numeric" />

      {/* Password — hides characters, enables password managers */}
      <label htmlFor="pw">Password</label>
      <input id="pw" type="password" autoComplete="new-password" minLength={8} />
    </form>
  );
}

Note: the inputMode attribute gives you extra control over the mobile keyboard even beyond what type provides. Use inputMode="numeric" for things like PIN codes where you want a number pad but type="number" does not quite fit (no spinner arrows wanted).

Plain HTML

<form>
  <!-- Email -->
  <label for="email">Email</label>
  <input id="email" type="email" autocomplete="email" inputmode="email" />

  <!-- Phone -->
  <label for="phone">Phone number</label>
  <input id="phone" type="tel" autocomplete="tel" inputmode="tel" />

  <!-- Website URL -->
  <label for="site">Website</label>
  <input id="site" type="url" autocomplete="url" inputmode="url" />

  <!-- Numeric with constraints -->
  <label for="age">Age</label>
  <input id="age" type="number" min="13" max="120" inputmode="numeric" />

  <!-- Search with clear button -->
  <label for="search">Search</label>
  <input id="search" type="search" name="q" />
</form>

Medium impact — forms~1 paw

This one is almost too easy. Change a single word in your HTML attribute and your mobile visitors will thank you. The cat judges any form that uses type="text" for email addresses.

How the cat scores this

The cat inspects every <input> element and checks whether the type attribute matches the data being collected. It looks at field names, labels, placeholders, and autocomplete attributes to guess what data the field expects, then flags mismatches. An input labelled "Email" with type="text" is an instant flag. The cat also checks for missing autocomplete attributes on common fields like name, email, phone, and address — these help browsers and password managers fill in data for your visitors.