01
Use real labels, not only placeholders
A placeholder disappears as soon as someone types, so they forget what the field was for. Give every field a visible <label> connected with for and id. It also makes the label tappable.
<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">02
Get the right keyboard
The input type and inputmode choose the phone keyboard, and autocomplete lets the phone fill in saved details.
- type="email" shows a keyboard with @
- type="tel" shows a number pad for phone numbers
- inputmode="numeric" for codes and numbers that aren’t phone numbers
- autocomplete="name", "email", "tel", "postal-code" for one-tap filling
03
Stop the zoom on focus
iPhone Safari zooms in when a field’s text is under 16px. Set 16px on inputs instead of disabling zoom (which hurts accessibility).
input, select, textarea { font-size: 16px; }04
Make controls easy to tap and find
Checkboxes and radio buttons should be wrapped in their label so the whole line is tappable. Keep the submit button full-width on phones, and check that cookie banners or chat widgets don’t cover it.
@media (max-width: 767px) { form button[type="submit"] { width: 100%; min-height: 48px; } }Checklist
Questions
Are placeholders enough instead of labels?
No. Placeholders vanish while typing and are often low-contrast. Use visible labels; placeholders can show an example.
How do I show the number keyboard on mobile?
Use type="tel" for phone numbers, or inputmode="numeric" for other numbers like codes.
How do I stop iPhone zooming on form fields?
Give fields a font-size of 16px. Don’t disable zoom with maximum-scale, which blocks people who need to zoom.