Mobile Form Layout

63. 모바일 폼 레이아웃 Design mobile-optimized forms: **Form Container**: - Padding: 16px horizontal - Scroll view for long forms - Keyboard-aware scrolling **Input Fields**: - Full width - Height: 56px (touch-friendly) - Font: 16px (prevents iOS zoom) - Padding: 16px horizontal **Field Layout**: - Label above input - Or floating label (Material style) - Required indicator: asterisk - Margin between fields: 20px **Floating Label**: - Rests in input when empty - Animates up and shrinks on focus - Stays up when filled **Keyboard Types**: - email-address: for email fields - phone-pad: for phone numbers - decimal-pad: for prices - url: for website fields **Autofill Support**: - textContentType for iOS - autoComplete for Android - Enable password managers **Input Accessories**: - Keyboard toolbar: Next/Previous/Done buttons - Navigate between fields - Done dismisses keyboard **Validation**: - Real-time on blur - Error text below field - Red border on error - Shake animation optional **Submit Button**: - Full width at bottom - Fixed above keyboard when visible - Or scroll to button **Form Sections**: - Group related fields - Section headers - Visual dividers **Long Forms**: - Progress indicator - Save draft capability - Multi-step wizard Tech: React Native + React Hook Form + KeyboardAvoidingView