목록으로
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