पाठ 13 / 25

Mobile के लिए Forms

बड़े inputs, single-column layouts, स्पष्ट error handling, और smart input types mobile forms को user-friendly बनाते हैं।

Mobile form best practices

  1. Mobile पर single column (side-by-side fields से बचें)। 2. Input height ≥ 44px easy tapping के लिए। 3. Inputs के ऊपर labels (placeholders नहीं)। 4. Smart input types (type="email", type="tel") mobile keyboards को trigger करते हैं। 5. स्पष्ट error messages दिखाएँ।

Mobile-friendly form structure

एक form जो touch और छोटी screens के लिए optimized है।

<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>