Form Design — UX থেকে Validation

ভালো Form-এর নীতিমালা

• Minimal fields — কম field, বেশি conversion
• Single column, clear label (top)
• Progress indicator, inline validation

Field Types

• email — @ keyboard mobile
• tel — phone keyboard
• number, date, radio/checkbox (2-7), select (7+)

Client Validation

<input type="email" required pattern="[^@]+@[^@]+" maxlength="100">
// On blur: best UX

Server Validation ⭐

public class UserDto {
  [Required, EmailAddress, StringLength(100)]
  public string Email { get; set; }
  [Range(18, 120)] public int Age { get; set; }
}

Accessibility

<label for="email">Email *</label>
<input id="email" type="email" required
       aria-describedby="email-error"
       aria-invalid="false">
<span id="email-error" role="alert"></span>

• 4.5:1 contrast minimum, 44x44px touch target
• Focus visible, tab order natural

Multi-Step Wizard

✅ Show progress (1 of 3), save state per step
✅ Back button works, validate before Next, review screen

Patterns

Inline edit, auto-save, dependent dropdown, autocomplete, date range, tag input।

Mobile

type="email/tel" → proper keyboard, autocomplete attr → autofill, big buttons।