Lesson 13 / 25

Forms for mobile

Large inputs, single-column layouts, clear error handling, and smart input types make mobile forms user-friendly.

Mobile form best practices

  1. Single column on mobile (avoid side-by-side fields). 2. Input height ≥ 44px for easy tapping. 3. Labels above inputs (not placeholders). 4. Smart input types (type="email", type="tel") trigger mobile keyboards. 5. Show clear error messages.

Mobile-friendly form structure

A form optimized for touch and smaller screens.

<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input id="email" type="email" inputmode="email" required>
  </div>
  <div class="form-group">
    <label for="phone">Phone</label>
    <input id="phone" type="tel" inputmode="tel">
  </div>
  <button type="submit">Submit</button>
</form>

<style>
  .form-group { margin-bottom: 24px; }
  input { width: 100%; padding: 12px; font-size: 16px; }
  button { width: 100%; padding: 16px; font-size: 16px; }
</style>